h1标签的垂直对齐为什么无法生效？

Question

我正在尝试使一个 h1 标签中的文本垂直居中对齐，因为这段文本可能会换行，所以需要保证无论是单行还是两行，都能呈现出良好的效果。

这是我使用的 CSS 代码：

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

HTML非常简单:

<h1>title</h1>

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

我是否误解了 vertical-align 属性？

- Naatan

---

请查看http://phrogz.net/css/vertical-align/。 - Dan D.

谢谢Dan，我也找到了那个页面...唯一的区别是他们在td元素上进行操作，其他方面我也是一样的...所以我不太确定我能做些什么不同的事情。 - Naatan

在页面的下方，他们指出vertical-align对于除表格单元格和内联元素之外的元素没有影响；对于块级元素，它只设置继承值。因此，在这些其他元素上实现垂直居中需要使用除vertical-align以外的其他方法。 - Dan D.

啊，我明白了，没有注意到那部分。谢谢你的信息！我想我得把它显示在一个表格中或者找一个不错的CSS hack。感谢你的帮助...请把你的解决方案提交为答案，这样我就可以标记它 :) - Naatan

Answer 1

不需要 CSS Hack。如果我理解你的意思正确，那么你可以使用以下 CSS：

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

请参见演示代码，其中设置了最低高度为30像素；

关于垂直对齐的说明：该样式仅在与行高样式结合使用时才有效，并且会根据行高进行计算。因此，将行高设置为10像素，使用12pt高的文本不留对齐空间。但将行高设置为30像素会导致更多文本行之间的间距过大。这里提供了一个技巧，用于垂直对齐多行文本，但只有在具有固定高度容器时才需要。在本例中，容器的高度（即h1元素）是流动的，因此您可以使用这个简单的填充解决方案。

- NGLN

---

在我的情况下，我实际上需要预定义的高度。你提供的技巧链接应该可以很好地解决这个问题！非常感谢 :) - Naatan

Answer 2

我不知道垂直对齐，但如果您添加高度属性并将高度和行高属性设置为相同，则可以获得垂直对齐：居中效果。

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

- hakan

---

谢谢，我需要使用行高来控制文本之间的间距。 - Naatan

Answer 3

使用flexbox布局的align-items:center和justify-content:center属性来居中H1标题，示例如下：

div {
padding: 1em;
border: 1px dashed purple;
}

h1 {
        display: flex;
        align-items: center;
        justify-content: center;
    }

<div>
<h1>Center this h1</h1>
</div>

- Andrey Tepaykin

Answer 4

只需添加一个 float 属性，例如使用 padding-top: 50%:

h1 {
  font-size: 12pt;
  line-height: 10pt;
  min-height: 30px;

  position: absolute;
  float: center; /* If you want it to be centered */
  padding-top: 50%;
}

- Nathan Campos

---

使用padding-top 50%将其居中需要另一个父元素，而且我需要知道文本生成的高度才能抵消填充..这违背了初衷。 - Naatan

Answer 5

我使用了CSS自定义属性（变量）和calc

:root {
  --header-height: 100px;
}

* {
  margin: 0;
  padding: 0;
}

header {
  font-size: 16px;
  height: var(--header-height);
  justify-content: space-evenly;
  display: flex;
  border-bottom: 1px solid #000;
}

h1,i {
  font-size: 1.2rem;
  display: inline-block;
  padding-top: calc(var(--header-height) - 1.2rem);
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet"/>
<header>
  <img src="https://placekitten.com/100/100" alt="logo" height="100">
  <h1>
  Kitten Stories
  </h1>
  <i class="fas fa-lock"></i>
</header>

- user2182349