horizontallly center table who's position is relative (width is responsive)

Question

This is my HTML:

<div id='footer'>
    <table id='headerBar'>
        <tr>
        <td class='headerBarActualTd'><a href='/' class='headerBarIconLink'></a><a href='/' id='homeIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/username/' class='headerBarIconLink'></a><a href='/uesrname/' id='myProfileIcon'></a></td>
        <td class='headerBarSpacingTd'></td>
        <td class='headerBarActualTd'><a href='/settings/settingsPage/' class='headerBarIconLink'></a><a href='/' id='settingsIcon'></a></td>
        </tr>
    </table>
</div>

and this is my CSS:

#footer table {
    position: fixed;
    bottom: 0px;
    margin: 0px auto;
}

#headerBar {
    border-collapse: separate;
    margin: 0px auto;
    width: 100%;
    max-width: 1080px;
    padding-left: 3px;
    padding-right: 2px;
}
#headerBar .headerBarActualTd {
    text-align: center;
    vertical-align: middle;
    width: 33%;
    position: relative;
    border: 1px solid black; 
    border-radius: 3px;
    padding: 2px;
}

#headerBar .headerBarSpacingTd {
    padding: 10px;
}
.headerBarIconLink {
    top: 0;
    left: 0;
    position: absolute;
    width: 100%;
    height: 100%;
}

.headerBarIconLink:hover {
    border: 1px solid #5f9f9f; 
    border-radius: 3px;
    z-index: 1;
}

I want to horizontally center my table while it is position (fixed) at the bottom of the screen. I've read a lot of posts (like this CSS horizontal centering of a fixed div? )

where the solution involves making the margin-left half of the width, however, I do not know the width since my width will be responsive and will depend on the users screen. Is there a way to make the table horizontally centered without knowing the exact width?

Here is a fiddle: http://jsfiddle.net/p3W4s/

(if you increase the screen of the actual fiddle, you'll see that the table is not aligned in the center).

@Sebastien apply that CSS to the table? It doesn't seem to work if I give the table a margin-left and a margin-right of auto: http://jsfiddle.net/6E2G9/ — SilentDev, Aug 01 '14 at 20:35

score 1 · Accepted Answer · answered Aug 01 '14 at 20:30

make the whole width 100%, and put your table inside with margin: 0 auto, will align everything center. and just change the yellow background to transparent.

http://jsfiddle.net/yUNuV/

html
css

.fixed {
width:100%;
height:40px;
background:yellow;
position:fixed;
bottom:0;
}
.center {
margin:0 auto;
width: 50%;
height:inherit;
background:red;
}

Brett Holmes · Answer 2 · 2014-08-01T20:38:39.183

0

Here is the code that will allow you to see all three centered. I also added the padding since the last table was running off the screen.

#footer table {
position: fixed;
padding-right: 18px;
bottom: 0px;
margin-left: auto;
margin-right: auto;
}

edited Aug 01 '14 at 20:38

answered Aug 01 '14 at 20:28

Brett Holmes

397
5
20

hm can you give me a fiddle? It doesn't seem to work over here: http://jsfiddle.net/6E2G9/ Once I extend the screen of the fiddle, the table doesn't seem to be in the middle. Instead, it looks like it is aligned to the left. – SilentDev Aug 01 '14 at 20:36
really? it looks like it's centered to me. – Brett Holmes Aug 01 '14 at 20:46

horizontallly center table who's position is relative (width is responsive)

2 Answers2