Сегодня я расскажу о CSS-способах центрирования страниц. И начну этот обзор с резиновой верстки, то есть такой верстки, где отступы и размеры основных элементов задаются в процентном соотношении.
Способы будем рассматривать на следующем примере HTML-разметки:
|
1
2
3
4
5
6
|
<html><body> <div id=”container”> </div></body></html> |
Основной способ центрирования выглядит следующим образом:
|
1
2
3
|
<style> #container { margin: 0 20%;}</style> |
Свойство margin устанавливает боковые отступы размером в 20% от ширины окна браузера. В результате мы получаем блок container, шириной в 60% от ширины окна браузера, центрированный посередине.
Теперь рассмотрим ситуацию с фиксированной версткой, то есть такой версткой, где ширина основного блока (в нашем случае container) указана явно, например, в пикселях.
Для этих целей можно использовать наиболее распространённый способ:
|
1
2
3
|
<style> #container { margin: 0 auto;}</style> |
В данном случае, для указания боковых отступов, мы используем значение auto свойства margin. В результате мы получаем центрированный блок с фиксированной шириной. Но, к сожалению, данный способ не поддерживается браузером IE6 (в режиме совместимости). Поэтому, рассмотрим пару альтернативных способов центрирования, лишённых этого недостатка.
Первый альтернативный способ: применить к селектору body свойство text-align со значением center:
|
1
2
3
|
<style> body {text-align: center;}</style> |
В результате мы получаем кроссбраузерное центрирование страницы, единственным недостатком которого явkяется наследственное центрирование, применяемое ко всем дочерным элементам. Исправляется этот недостаток элементарно: элементу container приписываем свойство text-align со значением left. Таким образом достигается хорошая совместимость со старыми версиями браузеров.
Второй альтернативный способ выглядит немного интереснее:
|
1
2
3
4
5
6
7
8
|
<style> #container { position: absolute; left: 50%; width: 800px; margin-left: –400px; }</style> |
Устанавливаем для нашего блока абсолютное позиционирование (position: absolute), делаем отступ слева на половину ширины экрана (left: 50%), и сдвигаем наш containerна половину собственной ширины влево (margin-left: –400px). В результате получаем центрированный блок, корректно воспринимаемый всеми популярными браузерами, включая легендарный IE6.
