CSS - Как центрировать таблицу по горизонтали, позиция которой является абсолютной

Question

У меня есть 5 html-страниц с одним и тем же кодом.Допустим, это код:

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

все 5 страниц ссылаются на один и тот же внешний CSS-файл, который является как раз этим:

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

На каждой из 5 страниц я вставил таблицу, вот так

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

В таблице всего одна строка.В одной строке мне нужно выбрать случайное число из 1-10, и именно столько td будет в строке.Таким образом, первая html-страница может содержать 2 td, вторая может содержать 6td и т.д.Мне нужно сделать так, чтобы вертикальное положение таблицы было одинаковым на всех страницах, но таблица должна быть выровнена по горизонтали.Я должен использовать абсолютную позицию, поскольку другие пользователи могут вводить несколько абзацев перед таблицей на некоторых страницах, а на некоторых страницах может не быть никаких дополнительных абзацев, поэтому для того, чтобы у меня было такое же вертикальное положение таблицы, мне нужна абсолютная позиция.Как мне сделать так, чтобы каждая таблица была центрирована по горизонтали?Под выравниванием по горизонтали я подразумеваю, что каждая таблица имеет одинаковое количество пробелов слева и справа независимо от того, сколько td в таблице.

margin: 0 auto;

у меня это не работает.Обратите внимание, что я не использую CSS3, а использую IE8.

Answer 1

margin: 0 auto не будет работать для элементов с абсолютным расположением.Все, что вам нужно сделать, это полностью расположить его посередине.Вы добьетесь этого, переместив его влево на 50%;а затем отрегулировал левое поле до отрицательной половины ширины элементов

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

это позволит центрировать его в середине родительского элемента

ps.убедитесь, что положение родительских контейнеров установлено в относительное

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