Почему позиция элемента в виде линейного блока имеет неправильное вертикальное положение в строке

Question

Когда я помещаю свой элемент встроенного блока (14x14px) в строку с одной строкой (высота и длина строки = 20 пикселей), это происходит не в середине это родительский (вертикальный). Line-height problem picture

Вот Сodepen example

HTML

<div class="status status_success"> Success</div> 
<div class="status status_busy"> Busy</div> 
<div class="status status_missed"> Missed</div> 

CSS

body { 
    font-size: 16px; 
    line-height: 20px; 
} 

.status { 
    position: relative; 
    display: block; 
    white-space: nowrap; 
    border: 1px solid #000; // block border for helping test 
    margin: 0 0 20px; 

    &:before { 
    content: ''; 
    display: inline-block; 
    vertical-align: middle; 
    width: 14px; 
    height: 14px; 
    background-color: #d6d6d6; 
    border-radius: 50%; 
    } 
} 

Скажите, пожалуйста, почему это происходит?

Answer 1

vertical-align: middle выравнивает середину элемента с серединой строчных букв родителя, который просто означает, что вертикальное выравнивание не 100% точный способ поместить элемент в точном середине своего родителя.

Src: https://css-tricks.com/almanac/properties/v/vertical-align/

В образцах ниже я добавил обертку (и пядь-й в 2: образце я, с размером шрифта, соответствующего размером псевдовосточного), чтобы показать, как они взаимодействуют и как вы можете сделать, чтобы сделать итоговый вид лучше.

Примечание: Как предложено «Vangel Tzo», flex - это один из способов, который лучше выполняет работу.

.wrap { 
 
    padding: 20px; 
 
    font-size: 16px; 
 
    font-family: "helveticaneuecyr", Arial, sans-serif; 
 
    line-height: 20px; 
 
} 
 

 
.status { 
 
    position: relative; 
 
    white-space: nowrap; 
 
    border: 1px solid #000; 
 
    margin: 0 0 20px; 
 
} 
 
.status:before { 
 
    content: ''; 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    width: 14px; 
 
    height: 14px; 
 
    background-color: #d6d6d6; 
 
    border-radius: 50%; 
 
} 
 
.status_success:before { 
 
    background-color: #3ad994; 
 
} 
 
.status_missed:before { 
 
    background-color: #e83e3e; 
 
} 
 
.status_busy:before { 
 
    background-color: #f5be48; 
 
} 
 
.status span { 
 
    display: inline-block; 
 
    vertical-align: middle; 
 
    font-size: 14px; 
 
}

<div class="wrap"> 
 
    <div class="status status_success"> Success</div> 
 
    <div class="status status_busy"> Busy</div> 
 
    <div class="status status_missed"> Missed</div> 
 
</div> 
 
<div class="wrap"> 
 
    <div class="status status_success"> <span>Success</span></div> 
 
    <div class="status status_busy"> <span>Busy</span></div> 
 
    <div class="status status_missed"> <span>Missed</span></div> 
 
</div>

Answer 2

попробуйте под кодом для горизонтального кода центра.

body { font-size: 16px; line-height: 20px; text-align:center;} 
.status { float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;} 

попытаться под кодом для вертикального центра кода.

.status { display:table: width:100%; float:none; position: relative; display:inline-block; white-space: nowrap; border: 1px solid #000; // block border for helping test margin: 0 0 20px;} 
.status:before { display:table-cell; vertical-align: middle;} 

Answer 3

Вы можете использовать display: flex для родительского элемента (.status) и align-self: center собственности к центру вертикально.

.status { 
    position: relative; 
    white-space: nowrap; 
    border: 1px solid #000; 
    margin: 0 0 20px; 
    display: flex; 
    } 

    .status:before { 
    content: ''; 
    display: inline-block; 
    width: 14px; 
    height: 14px; 
    align-self: center; 
    background-color: #d6d6d6; 
    border-radius: 50%; 
    } 

Пример: http://codepen.io/srekoble/pen/BKWJgx

Answer 4

Как @LGSon объяснений, то vertical-align не магический CSS, и его поведение никогда не доверяет мне. Поэтому я предлагаю альтернативный способ выравнивания ваших элементов так, как вы хотите. Поскольку вы уже поставили position:relative в .status, я предлагаю использовать position:absolute для создания вашего сгенерированного контента, и он более согласован между каждым браузером.

codepen пример: http://codepen.io/thovo/pen/MypQbW