CSS - How to horizontally center table whos position is absolute

Question

I have a 5 html pages with the same code. Say this is the code:

<div id='generic'>
</div>

all the 5 pages link to the same external CSS file which is just this:

<style>
    #generic {
        width: 700px;
        height: 500px;
    }
</style>

On each of the 5 pages, I inserted a table, like so

<div id='bottomBar'>
    <table id='bottomTable'>
        <tr id='bottomTr'>
        </tr>
    </table>
</div>

The table has only one row. In the one row, I need to pick a random number from 1-10, and that is how many td's the row is going to have. So the first html page can have 2 td's, the second can have 6td's, etc. I need to make it so that the vertical position of the table is the same throughout all pages but the table must be horizontally aligned. I have to use position absolute since other users might type a few paragraphs before the table on some pages, and on some pages, there might not be any additional paragraphs so in order for me to have the same vertical position of the table, I need position absolute. How do I make it so that every table is horizontally centered? By horizontally aligned, I mean that every table has an even amount of white space on the left And the right regardless of how many td's the table has.

margin: 0 auto;

doesn't work for me. Note that I am not using CSS3 and am using IE8.

user934902 · Accepted Answer · 2013-11-07T19:32:51.210

4

margin: 0 auto wont work for absolute positioned elements. What you need to do is absolute position it in the middle. You accomplish this by moving it left 50%; and then adjusted the left margin to negative half of the elements width

#bottomTable {
 position: absolute;
 width: 700px;
 left: 50%;
 margin-left: -350px; /*Half the width of your element*/
}

this will center it in the middle of its parent

ps. make sure the parent containers position is set to relative

http://jsfiddle.net/s7Gmm/3/

edited Nov 07 '13 at 19:32

answered Nov 07 '13 at 19:22

user934902

1,184
3
15
33

Hm this will make it so that every table begins from the center of the page, right? but it won't make every table horizontally centered. So if the row is 10 td's long, it won't be horizontally centered. The table will start at -350px yes but that doesn't make it horizontally centered, do you get what I mean? By horizontally centered, I mean an even amount of space on the left And right side of the table, regardless of how many td's the table has. – user2817200 Nov 07 '13 at 19:26
1

this will horizontally center the table (equal space on left and right) because of left: 50%; and margin-left: -350px; working together – user934902 Nov 07 '13 at 19:28
i made a fiddle and put it in the answer for you to look at – user934902 Nov 07 '13 at 19:33

CSS - How to horizontally center table whos position is absolute

1 Answers1