Почему встроенный блок не может быть выровнены по вертикали

Я довольно новыми для отображения 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> 
 
\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

Это из-за использования фактических символов глифов. –

Почему встроенный блок не может быть выровнены по вертикали

ответ

Смежные вопросы