Как получить эффект align = "center" в CSS и быть совместимым с XHTML и заставить его работать в большинстве браузеров - PullRequest
0 голосов
/ 01 октября 2009

Я пытаюсь сделать некоторые HTML-страницы более совместимыми и начинаю с простых вещей, таких как удаление align = "center" в таблицах и т. Д.

Однако я не могу добиться желаемого эффекта при использовании CSS. Вещи, которые я пробовал включать

text-align:middle
vertical-align:middle

и самое предложенное друзьями-дизайнерами

margin-left:auto; margin-right:auto; width: 100px

Но при определенных макетах или определенных браузерах (особенно IE6) ни один из них не работает. Есть ли надежный способ сделать это с помощью чисто CSS и заставить его работать в большинстве браузеров?

EDIT: Я имел в виду text-align: center;. Напечатал это в спешке. На странице уже есть DOCTYPE, но я не уверен, подходит ли он.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Ответы [ 3 ]

7 голосов
/ 01 октября 2009

Это:

text-align: center;

для горизонтального центрирования, но:

vertical-align: middle;

для вертикального центрирования, но вертикальное центрирование таким образом будет работать только с ячейками таблицы. Чтобы получить кросс-браузерное вертикальное центрирование без использования таблиц, посмотрите на Вертикальное центрирование в CSS (да, это нетривиально).

Примечание: text-align: middle и vertical-align: center являются неправильными значениями.

Для горизонтального центрирования элемента блока используется обычный трюк:

<div id="outer">
  <div id="inner">Some test...</div>
</div>

с:

#outer { width: 600px; }
#inner { width: 300px; margin: 0 auto; border: 1px solid black; }

Имейте в виду, что это не обязательно будет работать с некоторыми версиями IE в эвфемистическом режиме «причуд». Хорошей практикой является приведение IE в (также эвфемистический) режим «соответствия стандартам» с помощью DOCTYPE вверху документа.

0 голосов
/ 10 октября 2009
display:block; margin:0px auto;

Это будет центрировать блок внутри его родителя, не центрируя его содержимое.

0 голосов
/ 01 октября 2009

Горизонтальные автоматические поля в элементе блока / таблицы будут располагаться по центру по горизонтали, предполагая, что он расположен относительно / статически, имеет явную или внутреннюю ширину (например, таблица) и не с плавающей точкой документа в стандартном режиме, хотя есть небольшие исключения.

Возможно, было бы лучше привести пример, когда элемент не центрирован.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...