我试图将h1中的文本垂直对齐到中间,看到文本可能会换行,无论是1行还是2行都需要看起来很好看.
这是我使用的CSS：
h1 {
font-size: 12pt;
line-height: 10pt;
min-height: 30px;
vertical-align: middle;
}
html非常简单：
<h1>title</h1>
无论我为vertical-align输入什么值,文本始终位于h1元素的顶部.
我错过了解垂直对齐属性吗？
解决方法
不需要CSS黑客攻击.如果我理解正确,那么你可以使用这个CSS：
h1 {
font-size: 12pt;
line-height: 10px;
padding: 10px 0;
}
见demo fiddle,最小高度为30px;
关于垂直对齐的注释：该样式仅与 – 一起使用 – 并且相对于 – 线高度样式计算.因此,将行高设置为10px,放置高度为12pt的文本时,根本不会对齐任何空间.但是将行高设置为30px会导致更多行文本之间的空间过大. This shows a trick用于垂直对齐多行文本,但只有在具有固定高度的容器时才需要.在这种情况下,容器的高度(h1元素)是流动的,因此您可以使用这种简单的填充解决方案.
