h1上的垂直对齐不起作用？

Question

我试图将文本h1垂直对齐到中间,看到文本可能会换行,无论是1行还是2行都需要看起来很好看.

这是我使用的CSS:

h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;
  vertical-align: middle;
}

HTML非常简单:

<h1>title</h1>

无论我输入什么值vertical-align,文本始终位于h1元素的顶部.

我错过了解vertical-align物业吗？

Answer 1

不需要CSS hacks.如果我理解正确,那么你可以使用这个CSS:

h1 {
    font-size: 12pt;
    line-height: 10px;
    padding: 10px 0;
}

参见演示小提琴,其等于最小高度30px;

关于垂直对齐的注释:该样式仅与 - 一起使用 - 并且相对于 - 行高度样式计算.因此,将行高设置为10px,放置高度为12pt的文本不会留下任何空间.但是将行高设置为30px会导致更多行文本之间的空间过大.这显示了垂直对齐几行文本的技巧,但只有在具有固定高度容器时才需要这样做.在这种情况下,容器的高度(h1元素)是流动的,因此您可以使用这种简单的填充解决方案.

Answer 2

我不知道垂直对齐，但是如果您添加 height 属性并将 height 和 line-height 属性设置为相同，您将获得垂直对齐：居中效果

h1
{
    font-size: 12pt;
    line-height: 50px;
    height: 50px;
}