CSS способ горизонтального выравнивания таблицы
Я хочу показать таблицу фиксированной ширины в центре окна браузера. Сейчас использую
<table width = "200" align = "center">
Но Visual Studio 2008 выдает предупреждение в этой строке:
Атрибут align считается устаревшим. Рекомендуется более новая конструкция.
Какой стиль CSS следует применить к таблице, чтобы получить тот же макет?
Ответы 10
style = "text-align:center;"
(Я думаю)
или вы можете просто проигнорировать это, он все еще работает
Попробуй это:
<table width = "200" style = "margin-left:auto;margin-right:auto">
Стивен прав, в теория:
the “correct” way to center a table using CSS. Conforming browsers ought to center tables if the left and right margins are equal. The simplest way to accomplish this is to set the left and right margins to “auto.” Thus, one might write in a style sheet:
table
{
margin-left: auto;
margin-right: auto;
}
Но статья, упомянутая в начале этого ответа, дает вам другой способ центрировать стол.
An elegant css cross-browser solution: This works in both MSIE 6 (Quirks and Standards), Mozilla, Opera and even Netscape 4.x without setting any explicit widths:
div.centered
{
text-align: center;
}
div.centered table
{
margin: 0 auto;
text-align: left;
}
<div class = "centered">
<table>
…
</table>
</div>
Вы можете выровнять таблицу по центру с margin: 0 auto; в IE6 и выше, если вы убедитесь, что ваша страница имеет действительное объявление типа документа.
@Marco: У меня сейчас нет этой информации, но это может быть хорошей основой для вопроса о StackOverflow.
вы совершенно правы. TABLE не нужно указывать ширину для центрирования по горизонтали. Я это проверил. В то время как DIV нужно указать ширину, чтобы получить горизонтальное центрирование.
Это должно работать:
<div style = "text-align:center;">
<table style = "margin: 0 auto;">
<!-- table markup here. -->
</table>
</div>
Простой. В 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">
Я только изучаю это, и в итоге у меня сработало то, что я сначала сделал таблицу с тремя строками. Установите поле для левой и правой строк на 50%. Затем поместите одну строку таблицы фиксированной ширины внутри «данных таблицы» центральной «строки таблицы».
<style>
.abc {
text-align: center;
}
</style>
<table class = "abc">
<tr>
<td>Item1</td>
<td>Item2</td>
</tr>
</table>
Хотя в современном мире это может быть ересью - в прошлом вы использовали бы следующий код, отличный от CSS. Это работает во всех, включая современные браузеры, но, как я уже сказал, в современном мире это ересь:
<center>
<table>
...
</table>
</center>
Что вам нужно, так это какой-то способ сказать, что вы хотите центрировать таблицу, и что человек использует более старую версию браузера. Затем вставьте команды "<center>" вокруг стола. В противном случае - используйте css.
Удивительно - если вы хотите центрировать все в области ТЕЛА - вы можете просто использовать стандартный
text-align: center;
css, а в IE8 (по крайней мере) она будет центрировать все на странице, включая таблицы.
Добавьте в стиль div:
width: fit-content;
По сути, это работает так:
<table align = "center">
...
Но вы можете сделать это лучше с помощью CSS, и это будет лучший подход к использованию CSS, поскольку он обеспечивает динамическое поведение веб-страницы и быстро реагирует.
<table style = "text-align:center;">
Кроме того, если вам нужно отображать только таблицу на странице, вы можете пойти с выравниванием тегов тела только, как показано ниже,
<body style = "text-align:center;">
<table>
...
</table>
Если вам нужны другие предложения, дайте мне знать. Обязательно поможет вам в этом. Также с использованием функций начальной загрузки это было бы более простым и интерактивным.
Итак, какое решение вы выбрали в итоге?