Разработка сайтов

Верстка, адаптивная верстка, программирование, разработка на WordPress

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

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

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

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

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

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

и css: