Центрируем элемент переменной ширины

Центрируем элемент переменной шириныЕсли вы занимаетесь версткой сайтов, то возможно вы встречались с ситуацией, когда требуется выравнять по центру элемент с неизвестной шириной.

То есть, в классической ситуации, если требуется отцентровать элемент, мы для него должны задать свойство margin: 0 auto; и собственно конкретную, фиксированнйю ширину. В этом случае, наш элемент будет располагаться по центру.

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

На самом деле выход из этого есть и он очень простой. В данном видеоуроке я расскажу о нем.

Смотреть видеоурок

Как вы видите, все очень просто. И я надеюсь, что данный подход вам в дальнейшем поможет при верстке сайтов.

Понравилась статья?

Тогда оставь свой комментарий или расскажи о ней своим друзьям и коллегам.

Комментарии ВКонтакте

Добавить комментарийОдин комментарий

Alexei 28 июня 2015 г. в 23:30

Как вариант для тегов <li> вместо float: left написать display: inline-block и для блока #pagination написать text-align: center. Мне кажется это более распространенная практика центрирования.

Ответить
Наверх

Скачивание материалов доступно
только подписчикам!

Если вы подпишитесь, то сможете сразу же получить доступ ко всем материалам этого блога

Подписка бесплатная и займет у вас
не более 1 минуты

Получение доступа к материалам

Для получения доступа, заполните форму ниже. Введите свое настоящее имя и e-mail

« Вернуться назад

Проверьте свой почтовый ящик

и подтвердите подписку

После этого вы сразу же получите доступ ко всем материалам этого блога

Введите e-mail, который вы указывали при подписке

Мы проверим его по базе подписчиков и если вы на самом деле подписывались, то доступ для вас сново будет открыт

« Вернуться назад