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

我非常新的CSS显示，目前我要居中对齐一些文本和图标（垂直），但它只是不工作：为什么inline-block的不能被垂直对齐

.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> 
 
\t <title>TEST COSMOS ICONS</title> 
 
\t <link href="https://file.myfontastic.com/qRRrqNRQJ2GCtUGjRFh7DM/icons.css" rel="stylesheet"> 
 

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

我认为一行100％的行高可以控制文本和内联块元素垂直对齐中心，但是如果你付出了特别注意那些图标的权利，他们有点高于中心。

来源

2016-03-03 Kuan

[也许这将帮助你（http://howtocenterincss.com），虽然我知道这是没有真正“教” –

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

in-line的要点是让元素从左向右传播到屏幕上;所以，水平。

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

来源

2016-03-03 22:29:41 8protons

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>

来源

2016-03-03 22:31:37

谢谢，但是当它运行，图标上方和下方仍然没有相同的空间，从该齿轮图标可以看出，顶部区域大于底部区域 – Kuan

这是由于使用了实际的字符字形。 –

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

回答

相关问题