Выравнивание div блоков по центру (css, div html)
Сел я верстать и у меня напрочь вылетело из головы как поместить div по центру, но немного прикинув я вспомнил несколько способов как это сделать по всем правилам (:
Во первых, сразу выкинем мысль делать что-то с помощью:
<div align="center"></div>
или
text-align:center;
Это тупые деревенские методы, первый из которых вообще полный бред, а второй корректно располагает div по центру только в ie, в остальных браузерах он лишь располагает по центру текст.
Итак, что мы можем?
Способ 1. Самый крутой.
margin:0 auto;
Очень эффективный метод, который к тому-же позволяет выровнять отступы сверху и снизу.
К примеру, для выравнивания сверху пишем:
margin:10px auto;
Для выравнивания сверху и снизу:
margin:10px auto 5px;
На мой взгляд — это самый лучший способ выровнять блоки по центру. К тому-же он полностью валидный.
Способ 2. Процентный.
Если блок имеет ширину в процентах, то мы можем выровнять div по центру применяя равные отступы, чтобы добить полную ширину до 100%. Кто не понял, покажу на примере, так проще:
Имеем блок шириной 50%, чтобы выровнять его по центру, нам нужно боковые отступы сделать по 25% справа и слева соответственно. Смотрим код:
#test {<br /><br />
width:50%;<br /><br />
margin:0 25% 0 25%;<br /><br />
}
Есть ещё способы, но я не считаю, что они вообще имеют смысл, к примеру позиционирование с использованием отрицательного значения margin. Я и процентный способ написал лишь для примера, используйте первый способ и будет вам счастье :)
Понравилась статья?
Похожие посты:
Комментарии (всего 22 коммент.)
Первый — это тот, что самый крутой? Немножко путает, что второй есть, а первый не указан (первым идет плохой вариант). Надо бы поправить, в расчете, что материал очень полезный именно новичкам.
Поправил названия, спасибо за критику. :) Все-же первый вариант лучше, чем второй. Тут есть несколько причин, во первых не всегда верстка идет в процентах(у меня к примеру на блоге), а во вторых он очень простой, всего одно слово «auto» заставляет блок встать по центру — минимализм и красота кода :)
Пожалуйста :)
Всегда рименяю text-align: center; и во всех браузерах смотрется корректно!
Alex, с помощью text-align:center; выровнять блок не получится, только то, что внутри блока(текст, изображения и т.д.).
Не работает в IE 6
Использую всегда первый вариант.
Самый простой и надежный, на мой взгляд смешанный:
#wrap {
width: 1000px;
position: absolute;
left: 50%;
margin-left: -500px;
}
Спасибо автору за рецепты. Уже таблицами хотел делать(
самый круто способ не работает в ие 7, 8 а способ предлженный sman в комментах не пашет в опере и фф
Антон, всё работает в IE8 — сейчас сижу делаю в Windows 7 всё нормально сработало.
ref — классная капча :)
Александр, спасибо (:
использую метод, который описан в комменте от sman
а из приведеныых автором больше всего понравился процентный. он все же логичнее, чем через margin, имхо
margin: 0 auto; не работает в IE6, подтверждаю :(
А нафига кому-то ie6 ? Он уже умер, причём официально. Я вообще считаю, что поддерживать ie6 это огромный бред.
Спасибо чувак, оч помогло
Вот в разных операционках все по-разному. В хр работает в седьмой винде маргин ауто в осле не пашет... а вот с отрицательным половинным маргином (sman ) работает во всех браузерах.
Как интересно операционная система влияет на работу html и css ?
СПС чувак!!!
до этого сидел пытался выравнять по центру 2 дня!!!!!!!!
margin: auto; — не работает во многих браузерах и еще зависит о док тайпа.
Проверенный способ —
Все отлично, когда ширина центрируемого блока фиксирована, будь то в процентах или в пиксах. А вот отцентрируйте мне блок с шириной ауто )) С помощью марджин. Увы-увы марджин не справляеться. Предлогайте варианты гуру. Я пользу два вложеных блок с позиционированием 50% и — 50%. Эффект «слайдинг дорс»
Нужно 30% посетителям сайтов у которых ие6