Блог

Вертикальное выравнивание текста в блоке

При динамическом добавлении текста в какой нибудь блок, к примеру из админки в WordPress, его длина может быть разной, а бываю моменты когда етот текст нужно выровнить по середине блока по вертикали. В сети можно найти кучу разных вариантов как это сделать, но в моих случаях мне подходит вот такой способ.
Вот так будет выглядить текст относительно блока с белой полоской: вввввц
html код блоков такой:

и сразу представлю css код:

Класу “.block-5” присваиваем свойство display: table, а внутреннему блоку “span” свойство display: table-cell, делаем выравнивание по середине vertical-align: middle. Нужно будет задавать высоту блока “.block-5”. А так будут выглядеть 2 блока с разным текстом:
ввцй2у

Еще вариант выравнивания 2 блоков, один блок рисунок и у него будет статическая ширина и высота, а другой текст высота которого будет менятся. Вот скрин:
в222

В таком случае html код будет такой:

и css:

Спасибо, сообщение отправлено.