Tweet Выравнивание блочного элемента…
Tweet Выравнивание блочного элемента DIV по центру, а div именно блочный элемент. Один из фундаментальных вопросов для тех, кто создает сайты, используя блочную верстку. Рассмотрим несколько подходов для решения этой вроде и простой, но на самом деле не очень тривиальной задачи. Почти все знают параметр css: text-align:center Поэтому делают следующим образом:
| 1 2 | =”test”> =”kv”>> |
И добавляют стили:
| 1 2 3 4 5 6 7 8 9 | #test { text-align:center; } #kv{ width:100px; height:100px; background:#F00; } |
Но этот фокус работает только в Internet Explorer 6, за 7 не скажу, в 8 точно не работает. Другие браузеры на него не отреагируют выравниванием дочернего div. В силу того, что text-align работает только для строковых элементов. Существует несколько способов для выравнивания div по центру:
Text-align для родительского элемента
Был описан выше, но работает только для IE 6. Его недостаток так же в том, что в родительском блоке тоже все выравнивается по центру. Продеться писать во втором блоке text-align:left, что бы вернуть все на место.
Align для родительского элемента
Те же два div
| 1 2 | =”test”> =”kv”>> |
Но прямо в html коде ставим выравнивание родительскому div.
| 1 2 | =”test” align=”center”> =”kv”>> |
Стили:
| 1 2 3 4 5 6 7 8 9 | #test { } #kv{ width:100px; height:100px; background:#F00; } |
Недостаток тот же, что и в первом случае. Но зато работает во всех браузерах!
Margin для элемента с фиксированой шириной
В третьем способе достаточно будет одного div
| 1 | =”kv”>> |
Стили:
| 1 2 3 4 5 6 7 | #kv { width:100px; height:100px; background:#F00; margin:0 auto; } |
Поддерживается всеми браузерами. !Важно: у div должна быть фиксирования ширина.
Margin для элемента ширина которого задана в процентах
Наш старый добрый div
| 1 | =”kv”>> |
Только в стилях ширину поменяем на проценты
| 1 2 3 4 5 6 | #kv { width:50%; height:100px; background:#F00; } |
Теперь применим выравнивание div по центру:
| 1 2 3 4 5 6 7 | #kv { width:50%; height:100px; background:#F00; margin: 0 25% 0 25%; } |
То есть мы указали, что отступ слева и справа будет 25%, а сверху и снизу 0.
Центрируем с помощью позиционирования
Подробнее о позиционировании можно почитать здесь.
| 1 | =”kv”>> |
Стили: Выравнивае div по центру с помощью relative: #kv
| 1 2 3 4 5 6 7 8 | { width: 100px; height:100px; background:#F00; position:relative; left:50%; margin-left:-100px; } |
Выравнивае div по центру с помощью absolute:
| 1 2 3 4 5 6 7 8 | #kv{ width:100px; height:100px; background:#F00; position:absolute; left:50%; margin-left:-100px; } |
Код тот же. Но разный подход к позиционированию! На этом все. Удачи!!! С уважением Тригуба Сергей! Спасибо Вам, что добавили эту статью в: Добавить в Twitter Добавить в Вконтакт Добавить в Facebook Добавить в Google buzz Добавить в Мой мир Опубликовать в своем блоге livejournal. com Приглашаю присоединиться ко мне в следующих сервисах: Присоединится ко мне в twitter Присоединится ко мне в Вконктакте Присоединится ко мне в Facebook Присоединится ко мне в Google buzz Присоединится ко мне в friendfeed Мои групы: Группа webmasterprof. ru в Facebook Группа webmasterprof. ru в Вконтакте Будь в курсе! Подпишись на обновления блога через: RSS RSS Email Email