html – h1上的vertical-align只是不起作用？

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

这是我使用的CSS：

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

html非常简单：

<h1>title</h1>

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

我错过了解垂直对齐属性吗？

解决方法

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

见demo fiddle,最小高度为30px;

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

（编辑：南平站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!