Давайте сначала посмотрим на мой простой код файла XHTML/HTML (часть). Наша цель — центрировать #container по горизонтали.
<тело>
<div id="контейнер">
<h1>содержание</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
</div>
</body>Использовать адаптивные поля (автоматическое поле)
Предпочтительный способ центрировать любой элемент по горизонтали — использовать свойство поля и установить для левого и правого значений значение auto. Но вы должны указать ширину #container.
div#контейнер {
поле слева: авто;
поле справа: авто;
ширина: 168 пикселей;
}
Это решение работает в любом современном браузере, даже в IE6, если он находится в режиме соответствия веб-стандартам. К сожалению, это не будет работать в предыдущих версиях IE/Win. Для этого составляем таблицу: Просмотр списка поддержки адаптивных границ Поддержка версий браузера
Internet Explorer 6.0, режим соответствия Да
Internet Explorer 6.0, режим совместимости Нет
Internet Explorer 5.5 Windows Нет
Internet Explorer 5.0 Windows Нет
Internet Explorer 5.2 Macintosh Да
Все текущие версии Mozilla
Все версии Mozilla Firefox
Netscape 4.x Нет
Netscape 6.x+ Да
Opera 6.0, 7.0 Macintosh и Windows Да
Сафари 1.2 Да
Хотя поддержка браузера ограничена, большинство дизайнеров рекомендуют вам делать это, когда это возможно. Но мы по-прежнему можем использовать CSS во всех ситуациях. Использование выравнивания текста (text-align). Это решение требует использования свойства text-align, которое применяется к элементу body и которому присваивается значение center.
тело{
выравнивание текста: по центру;
}
Он подходит для всех браузеров, является подробным и всегда под рукой. Однако это свойство, присвоенное тексту, приводит к тому, что текст в #container также центрируется. Поэтому нам придется проделать дополнительную работу по макету:
div#контейнер{
выравнивание текста: по левому краю;
}
Таким образом, выравнивание текста можно вернуть в состояние по умолчанию. Интегрированные границы и выравнивание текста. Поскольку выравнивание текста обратно совместимо, а современные браузеры также поддерживают адаптивные границы, многие дизайнеры комбинируют их для обеспечения кросс-браузерного использования.
тело{
выравнивание текста: по центру;
}
#контейнер {
поле слева: авто;
поле справа: авто;
граница: 1 пиксель, сплошная красная;
ширина: 168 пикселей;
выравнивание текста: по левому краю
}
Увы, он все еще не идеален, потому что это все еще хак. Вам придется написать повторяющиеся правила расположения текста. Но теперь мы можем использовать более совершенное кроссбраузерное решение.
Отрицательное граничное решение