Получать рассылку по электронной почте

Введите свой email-адрес:

Delivered by FeedBurner

Навигация

Как выравнять по центру элемент на веб-странице?

1195369_11292384

Выравнивание блока фиксированной ширины

Предположим у нас есть блочный элемент фиксированной ширины (например, div), который нужно выравнять по центру. Указанный случай самый простой, поэтому с него и начнем.

Есть два общеизвестных способа это сделать – использовать margin, либо позиционирование.

Внешние отступы

Когда для блочного элемента задается правило margin: 0 auto; (что равносильно заданию margin-left:auto и margin-right:auto) браузер сам вычисляет какие внешние отступы(margin) будут слева и справа и делает их одинаковыми. Но вот незадача: для того чтобы все сработало необходимо, чтобы хотя бы ширина была задана явно, в пикселах там, или в процентах.

выравнивание с помощью margin

Вот код этого простейшего примера.

Демонстрационный пример

Позиционирование

Блок, который нужно выравнять, позиционируется относительно родительского элемента. Сначала он передвигается на 50% влево (left:50%), а затем, чтобы его середина совпала с серединой родителя, смещается в обратную сторону на расстояние, равное половине его ширины (margin-left:-100px).

выравнивание по центру

Демонстрационный пример

Выравнивание горизонтального меню по центру

Как выравнять меню по центру, если его ширина не известна (явно не указана) и определяется содержимым?

Решить эту задачу “в лоб” приведенными ранее методами не получится. Обычно в роли меню выступает  список ul,  пункты li, которого выстроены в ряд с помощью  обтекания float:left. Легко можно добиться такого же точно эффекта, применив к ним свойство display:inline-block; заставляющее пункты li вести себя как строчный элемент (выстраиваться в одну строку), но и сохранять свойства блочного(возможность задавать ширину, внутренние и внешние отступы).

Теперь мы можем легко разместить наше меню по центру, указав для родительского элемента ul свойство text-align:center:  строчная “природа” элементов inline-block вынудит их расположиться, как и обычный текст в данном случае – по центру. Ниже смотрим пример.

Демонстрационный пример

Будьте внимательны  с элементами inline-block! При записи кода HTML лучше писать их в одну строку(как  написаны в примере li), в противном случае – при наличии переводов строки между ними – неизбежны дополнительные отступы между пунктами. Выглядит это так.меню с расстояниями между пунктами

Хак для IE 7

Старый “ослик” не понимает display:inline-block, поэтому заключаем в условные комментарии персональный стиль для этого браузера и помещаем перед закрывающим элементом </head> веб-страницы.

Очевидно, что данный метод для меню в виде блоков можно взять на вооружение для  строчной (текстовой) навигации.  Отличие только в том, что свойство пунктов li display:inline-block  поменяется на display:inline.

 Демонстрационный пример

Выравнивание таблицы по центру

Хорошо, когда таблица определенной ширины – тогда достаточно просто использовать простой способ с margin. Но ведь по умолчанию ширина таблицы зависит от содержимого. Какой мы можем найти способ, чтобы решить данную проблему?

Я предлагаю в данном случае воспользоваться малораспространенным свойством inline-table, придающим таблице поведение строчного элемента. Поддержка его браузерами ничуть не хуже inline-block, но вот сфера применения узка. А далее принцип аналогичен выравниванию меню – для родительского элемента пишем text-align:center.

Демонстрационный пример

На этом все, спасибо, надеюсь этот пост был для вас полезен.

Понравилась статья?
Подпишитесь на RSS по e-mail
Поделитесь в социальных сетях
Вы можете также посмотреть
Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*