当我使用垂直对齐时，为什么 img 不能垂直居中？

问题描述

当我使用vertical-align时，img不能垂直居中，我真的不明白为什么。

h1 {
  position: relative;
  line-height: 50px;
  background: blanchedalmond;
}

h1::before {
  content: '';
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 1px solid green;
}

img {
  width: 30px;
  height: 30px;
  vertical-align: middle;
}

<h1>
  <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
  vertical-align middle
</h1>

解决方法

首先，您没有应用垂直对齐中间。您已将其作为文本发布到 HTML 中，但因此，它也只能作为文本使用，而不能作为代码命令使用。

那么，vertical-align: center; 只能与表格或表格单元格结合使用。所以你需要申请：display: table-cell;。然而，更现代的解决方案是 flexbox。使用：h1 { display: flex; align-items: center; }，图像将在 <h1> 标签内垂直居中。

那么你有两个问题：

关键问题：<h1><div></div></h1> 是无效的 HTML 标记，既不能通过 W3C 也不能通过 WHATWG 标记检查。 <div> 不能是标头标记中的子项。

小问题在于 <img /> 标签。由于 HTML5 图像标签是一个空标签。意味着它没有结束标记，也没有末尾的斜线。简单地写成<img>。只有少数框架/库仍然使用斜杠。

h1 {
  position: relative;
  line-height: 50px;
  background: blanchedalmond;
  display: flex;
  align-items: center;
}

.line {
  position: absolute;
  top: 50%;
  width: 100%;
  border-top: 1px solid green;
}

img {
  width: 30px;
  height: 30px;
}

<h1>
  <div class="line"></div>
  <img src="https://img01.yzcdn.cn/vant/cat.jpeg" />
  vertical-align middle
</h1>