CSS способ горизонтально выровнять таблицу
6 ответов
Steven прав, в теория :
“correct” способ центрировать таблицу с помощью CSS. Приспосабливание браузерам должно центрировать таблицы, если левые и правые поля равны. Самый простой способ выполнить это состоит в том, чтобы установить левые и правые поля на “auto. ” Таким образом, можно было бы записать в таблице стилей:
table
{
margin-left: auto;
margin-right: auto;
}
, Но статья, упомянутая в начале этого ответа, дает Вам все другие способ центрировать таблицу.
изящное css решение перекрестного браузера: Это работает и в MSIE 6 (Причуды и в Стандартах), Mozilla, Opera и даже Netscape 4.x, не устанавливая явных ширин:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class="centered">
<table>
…
</table>
</div>
Попробуйте это:
<table width="200" style="margin-left:auto;margin-right:auto">
Простой. IE6 и выше будет счастливо центрировать Вашу таблицу с "полем: 0 автоматических"; если только страница представляет в режиме "стандартов". Чтобы заставить это произойти, Вам нужно допустимое doctype объявление, такой как
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
или
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Правда, IE5.5 и ниже все еще откажется центрировать таблицу, но возможно можно жить с этим, особенно если страница все еще функциональна с выровненной по левому краю таблицей. Я думаю к настоящему времени, что пользователи IE5.5 и ниже справедливо привыкли к некоторым нечетно выглядящим веб-сайтам - но все еще необходимо удостовериться, чтобы те визуальные незначительные сбои не представляли неприменимый сайт.
Счастливое кодирование!
РЕДАКТИРОВАНИЕ: Извините, я должен, возможно, указать, что у Вас не должно быть "строгого" doctype для получения IE6 и в режим рендеринга "стандартов". Я понял, что могло бы казаться, что путь от doctype примеров я отправил выше. Например, это doctype объявление будет, конечно, работать одинаково:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
style="text-align:center;"
(я думаю)
или Вы могли просто проигнорировать его, это все еще работает
Это должно работать:
<div style="text-align:center;">
<table style="margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
Я только изучаю это, и то, что в итоге сработало для меня, - это сначала создать таблицу с тремя строками. Установите поле для левого и правого ряда на 50%. Затем поместите одну строку таблицы фиксированной ширины в «данные таблицы» центральной «строки таблицы».