Question

我是CSS显示器的新手，目前我想中心对齐一些文字和图标（垂直），但它不起作用：

＆＃13;

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

＆＃13;

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

＆＃13;

我认为100％行高可以控制文本和内嵌块元素垂直对齐中心，但是如果你指定注意那些图标，它们会略高于中心。

Answer 1

“为什么内联块不能垂直对齐？”

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>

为什么内联块不能垂直对齐

2 个答案: