Эквивалентный из valign=center для <p> с CSS
У меня есть следующий код на моей странице:
<p align="justify"
style="font-size:10pt;display:block;height:200px;vertical-align:middle;">
Content
</p>
Я хочу, чтобы текст был вертикально выровненный в центре p тег
Используя vertical-align:middle кажется, не работает.
Существует ли способ сделать это?
4 ответа
Самый простой способ - заключить его в таблицу, например:
<table><tr><td style='vertical-align: middle; height:200px;'>
<p align="justify" style="font-size:10pt;display:block;">
Content
</p>
</td></tr></table>
О, и align = "justify" должно переместить в CSS как text-align: justify
Это не так просто, как просто присвоить vertical-align: middle . Этот стиль предназначен для столов. Для вертикального выравнивания без таблиц вы можете использовать один из способов, показанных здесь:
http://blog.themeforest.net/tutorials/vertical-centering-with-css/
самый простой способ сделать это, я думаю, будет использование padding-top и количество этого padding зависит от размера текста, конечно.
Например, для div высотой 30px, содержащего шрифт 10px, padding-top будет равен 10px, кроме того, вам нужно помнить, что сумма, которую вы добавляете в качестве padding-top, должна быть отнята от высоты.
То есть, если вы указали высоту в css как фиксированную 30px, то после применения 10px padding-top вы должны сделать эту фиксированную высоту 20px.
свойство vertical-align предназначено для установки вертикального выравнивания контейнера, а не содержимого.
Если у вас есть только содержимое, которое помещается в одну строку, вы можете использовать обходной путь установки высоты строки на высоту элемента
line-height:200px;