为什么 inline-block 不能垂直对齐

Question

我对 CSS 显示非常陌生，目前我想将一些文本和图标（垂直）居中对齐，但它不起作用：

.header {
display: inline-block;
height: 30px;
width: 200px;
background-color: #1f78b4;
}
.holder {
width:auto;
height: 30px;
background-color: lightblue;
float:right;
line-height: 30px;
}
.menuitem {
display: inline-block;
line-height: 30px;
}
.source {
height: 30px;
}

<!DOCTYPE html>
<html>
<head>
	<title>TEST COSMOS ICONS</title>
	<link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">

</head>
<body>
	<div class="header">
		<span class="holder">
			<span class="menuitem source">Perf</span>
			<span class="menuitem icon-gear"></span>
			<span class="menuitem icon-download"></span>
		</span>
	</div>
</body>
</html>

我认为一个 100% 行高的行可以控制文本和 inline-block 元素垂直居中对齐，但如果你特别注意那些图标，它们会在中心上方一点。

Answer 1

“为什么inline-block不能垂直对齐？”

in-line 的重点是让元素从左到右传播到屏幕；所以，水平的。

如果你想要垂直，不要使用in-line样式的元素，因为元素自然地从上到下传播；所以，垂直。

Answer 2

vertical-align:middle 似乎是您所追求的，但您也需要将其应用于伪元素。

.header {
  display: inline-block;
  height: 30px;
  width: 200px;
  background-color: #1f78b4;
}
.holder {
  width: auto;
  height: 30px;
  background-color: lightblue;
  float: right;
  line-height: 30px;
}
.menuitem,
.menuitem::before {
  display: inline-block;
  vertical-align: middle;
}
.source {
  height: 30px;
}

<!DOCTYPE html>
<html>

<head>
  <title>TEST COSMOS ICONS</title>
  <link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet">

</head>

<body>
  <div class="header">
    <span class="holder">
    <span class="menuitem source">Perf</span>
    <span class="menuitem icon-gear"></span>
    <span class="menuitem icon-download"></span>
    </span>
  </div>
</body>

</html>