CSS способ горизонтального выравнивания таблицы

96

Я хочу показать таблицу фиксированной ширины в центре окна браузера. Сейчас использую

<table width="200" align="center">

Но Visual Studio 2008 дает предупреждение в этой строке:

Атрибут align считается устаревшим. Рекомендуется более новая конструкция.

Какой стиль CSS следует применить к таблице, чтобы получить тот же макет?

html css alignment css-tables Александр Прокофьев
источник
2
Итак, какое решение вы выбрали в итоге?
Ола Тувессон

Ответы:

183

Теоретически Стивен прав :

«правильный» способ центрировать таблицу с помощью CSS. Соответствующие браузеры должны центрировать таблицы, если левое и правое поля равны. Самый простой способ добиться этого - установить для левого и правого поля значение «авто». Таким образом, можно написать в таблице стилей:

table
{ 
    margin-left: auto;
    margin-right: auto;
}

Но статья, упомянутая в начале этого ответа, дает вам другой способ центрировать стол.

Элегантное кроссбраузерное решение css: оно работает как в MSIE 6 (Quirks, так и в стандартах), 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>
VonC
источник
Вы можете выровнять таблицу по центру с margin: 0 auto; в IE6 и выше, если вы убедитесь, что ваша страница имеет действительное объявление типа документа.
Ola Tuvesson
@Marco: У меня сейчас нет этой информации, но это может быть хорошей основой для вопроса о StackOverflow.
VonC
1
вы совершенно правы. TABLE не нужно указывать ширину для центрирования по горизонтали. Я это тестировал. В то время как DIV нужно указать ширину, чтобы получить горизонтальное центрирование.
Марко Демайо
17

Попробуй это:

<table width="200" style="margin-left:auto;margin-right:auto">
Jalbert
источник
2

Просто. В IE6 и более поздних версиях ваша таблица будет центрирована с помощью "margin: 0 auto;" если только страница отображается в "стандартном" режиме. Для этого вам понадобится действительное объявление типа документа, например

<!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 и ниже уже привыкли к некоторым странно выглядящим веб-сайтам, но вам все равно нужно убедиться, что эти визуальные сбои не сделают ваш сайт непригодным для использования.

Удачного кодирования!

РЕДАКТИРОВАТЬ: Извините, я, возможно, должен указать, что вам не обязательно иметь «строгий» тип документа, чтобы перевести IE6 и выше в режим «стандартного» рендеринга. Я понял, что это может показаться таким из примеров doctype, которые я опубликовал выше. Например, это объявление doctype, конечно, будет работать одинаково:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ола Тувессон
источник
2

Хотя в современном мире это может быть ересью - в прошлом вы использовали бы следующий код, отличный от CSS. Это работает во всем, вплоть до современных браузеров, но, как я уже сказал, в современном мире это ересь:

<center>
<table>
   ...
</table>
</center>

Что вам нужно, так это какой-то способ сказать, что вы хотите центрировать таблицу, и что человек использует старый браузер. Затем вставьте команды «<center>» вокруг стола. В противном случае - используйте css.

Удивительно - если вы хотите центрировать все в области ТЕЛА - вы можете просто использовать стандартный

text-align: center;

css, а в IE8 (по крайней мере) она будет центрировать все на странице, включая таблицы.

Марк Мэннинг
источник
0 
style="text-align:center;"

(думаю)

или вы можете просто проигнорировать это, он все еще работает

Стивен А. Лоу
источник
0

Это должно работать:

<div style="text-align:center;">
  <table style="margin: 0 auto;">
    <!-- table markup here. -->
  </table>
</div>
Мэтт Хауэлл
источник
0

Я только изучаю это, и в итоге у меня сработало то, что я сначала сделал таблицу с тремя строками. Установите поле для левого и правого ряда на 50%. Затем поместите одну строку таблицы фиксированной ширины в «данные таблицы» центральной «строки таблицы».


источник
0 
<style>
    .abc {
        text-align: center;
    }
</style>

<table class="abc">
    <tr>
        <td>Item1</td>
        <td>Item2</td>
    </tr>
</table>
Чандра Шекхар Шарма
источник
0

По сути, это работает так:

<table align="center">
...

Но вы можете сделать это лучше с помощью CSS, и это будет лучший подход к использованию CSS, поскольку он обеспечивает динамическое поведение веб-страницы и быстро реагирует.

  <table style="text-align:center;">

Кроме того, если вам нужно отображать только таблицу на странице, вы можете пойти с выравниванием тегов тела только, как показано ниже,

 <body style="text-align:center;">
<table>
  ...
</table>

Если вам нужны другие предложения, дайте мне знать. Обязательно поможет вам в этом. Кроме того, с использованием функций начальной загрузки это было бы более простым и интерактивным.

Гурав Гаутам
источник
0

Добавьте в стиль div:

width: fit-content;
Халед Мохаб
источник