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

标签 css

我是 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% 行高可以控制文本和行内 block 元素垂直居中，但如果你特别注意那些图标，它们会稍微高于中心。

最佳答案

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

in-line 的要点是让元素从左到右传播到屏幕；所以，横向。

如果您想要垂直放置，不要使用带有内联 样式的元素，因为元素自然地从上到下传播；所以，垂直。

关于css - 为什么inline-block不能垂直对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35784264/