Способы css центрирования блоков
Какими способами Вы пользуетесь для центрирования содержимого блока на странице? Существует два современных и главное валидных способа отцентрировать блок на странице. Вибирая способ центрирования Вы должны руководствоватся тем, как спроэктирована страница:
- Фиксированная ширина
- Плавающая ширина (зависит о размера окна в браузере)
Центрирование блоков с плавающей шириной
Чтоб отцентрировать блок с плавающей шириной достоточно выставить боковые внешние отступы (
margin) для блока в пикселях или процентах.
div#container {
margin-left:10%;
margin-right:10%;
}
Центрирование блоков с фиксированной шириной
Теоретически, для центрирования блока фиксированной ширины достаточно определить боковые внешние отступы как
auto div#container {
margin-left:auto;
margin-right:auto;
width:50em;
}
К сожалению не во всех браузерах блок будет распологатся по центру использую этот метод. К таким браузерам относятся:
- NN4 (Mac and Win)
- Win/IE4>
- Win/IE5
- Win/IE5.5
- Win/IE6 (при включенном quirks-mode)
Если добавить два простых правила, эта проблема может быть решена во всех упомянутых выше браузерах, исключая NN4.
1. Центрирование контейнера body
Если браузеры игнорируют боковые отсупы установленные как
auto, то благодаря правилу
text-align: center для контейнера body содержимое будет располагатся по центру.
body {
text-align:center;
}
div#container {
margin-left:auto;
margin-right:auto;
width:50em;
}
2. Сброс свойства text-align
Единственной проблемой при использовании этого метода является то, что теперь все содержимое контейнера
<body> будет распологатся по центру. Чтоб избавится от этого нам нужно для блока с содержимым обнулисть свойство
text-align. Для этого применяем следующий набор правил в css:
body {
text-align:center;
}
div#container {
margin-left:auto;
margin-right:auto;
width:50em;
text-align:left;
}
Выводы к статье о центрировании блоков
В данной статье рассмотрено:
- Способ центрирования блока плавающей ширины
- Способ центрирования блока фиксированной ширины
- Способ центрирования блока фиксированной ширины для старых браузеров.
Оригинал статьи
CSS Centering - fun for all!
Добавить комментарий
Комментарии
RSS лента комментариев этой записи.