gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 06:17:55 25 4
gpt4 key购买 nike

我是 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com