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

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

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

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

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

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

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

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

  • 28.06.2015 23:30

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