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黑客攻击。如果我理解正确，那么你可以使用这个CSS：

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

请参阅demo fiddle，其等于最小高度30px;

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

Answer 2

我不知道垂直对齐，但是如果你添加高度属性并设置高度和行高属性相同，你得到垂直对齐：中心效果

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

Answer 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>

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%;
}

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>

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

5 个答案: