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

【问题标题】：Vertical-align on h1 just won't work?h1 上的垂直对齐不起作用？
【发布时间】：2011-07-23 18:38:54
【问题描述】：

我正在尝试将 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 属性的理解？

【问题讨论】：

见phrogz.net/css/vertical-align
谢谢丹，我也确实找到了那个页面。我看到的唯一区别是他们在 td 元素上做这件事，其余的我做同样的事情。所以我不太确定我可以做些什么不同的事情。
在页面下方，他们声明vertical-align 对表格单元格和内联元素以外的元素没有影响；在块元素上，它只设置要继承的值。因此，要使其他元素垂直居中，必须使用 vertical-align 以外的方法。
啊，我明白了，没注意到那部分。谢谢（你的）信息！我想我必须在表格中显示它或找到一个不错的 css hack。感谢您的帮助.. 请提交您的解决方案作为答案，以便我标记它:)

标签： html css

【解决方案1】：

无需 CSS hack。如果我理解正确，那么你可以使用这个 CSS：

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

参见demo fiddle，其最小高度为 30 像素；

关于垂直对齐的说明：该样式仅适用于 - 并且是根据 - line-height 样式计算的。因此将行高设置为 10px，放置高度为 12pt 的文本根本没有对齐空间。但是将 line-height 设置为 30px 会导致更多文本行之间的空间过大。 This shows a trick 用于垂直对齐多行文本，但仅当您有固定高度的容器时才需要。在这种情况下，容器的高度（h1 元素）是可变的，因此您可以使用这个简单的填充解决方案。

【讨论】：

在我的情况下，我实际上需要预定义的高度。您提供的技巧的链接应该可以做到这一点！非常感谢:)

【解决方案2】：

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

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

【讨论】：

谢谢，不过我需要行高来控制文本之间的间距。

【解决方案3】：

使用 flexbox 将 H1 标题居中对齐项目中心并对齐内容中心，请参见以下示例：

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

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

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

【讨论】：

【解决方案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%;
}

【讨论】：

用 padding-top 50% 居中需要另一个父元素，我还需要知道生成的文本高度以抵消填充.. 这违背了目的。

【解决方案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>

【讨论】：