Используем vertical-align для вертикального выравнивания текста в контейнере

Назначение каскадного стиля vertical-align не так прозрачно и понятно, как бы хотелось. Многие (в том числе и я долгое время) ожидал от него выравнивания содержимого контейнера по высоте. А когда этого эффекта не удавалось получить напрямую, разводил руками — мол, что то тут не работает. :)

Приспособить к требуемой цели vertical-align можно, соблюдая простые правила. Для начала надо понять, что vertical-align относится к прилеганию текста внутри строки, т.е. оперирует с inline-элементами или элементами inline-block. Следовательно, в свойствах внешнего контейнера должна быть задана высота строки (line-height), а выравниваемые блоки должны иметь свойство display: inline-block.

После этого все встаёт на свои места. Вот пример стилей для центровки текста внутри контейнера.

Применяем стили вот к такому HTML коду

В браузере это выглядит так:

v-align-sample

Эффекта центровки мы добились, хотя заметно легкое смещение от центра вниз контейнера. Данный эффект побороть не удалось :).

А вот пара отличных статей по данной тематике:

Разбираемся с vertical-align
Вертикальное выравнивание текста

Написать комментарий

Мало букафф? Читайте есчо !

Кнопка для добавления записи в twitter

Октябрь 19, 2011 г.

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

Читать

Отключаем подсказку автозаполнения в полях формы

Октябрь 20, 2015 г.

Вроде бы и полезная вещь - автозаполнение, но иногда требуется его выключить. Т.к. стилизовать его нельзя, этот выпадающий слой с подсказкой портит внешний вид. А иногда эта функция просто не к месту. Как от неё избавиться? HTML атрибут autocomplete ...

Читать

 

Комментарии к «Используем vertical-align для вертикального выравнивания текста в контейнере»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: