Why inline-block element position has wrong vertical position in a line - html

Question

When i put my inline-block element (14x14px) in single-line row (height and line-height = 20px), it takes place not in the middle of it's parent (vertical). Line-height problem picture
Here's a С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%;
}
}
Tell me, please, why is it happening?

Answer 1

The vertical-align: middle aligns the middle of the element with the middle of lowercase letters in the parent, which simply means the vertical alignment is not a 100% precise way to put an element in the exact middle of its parent.
Src: https://css-tricks.com/almanac/properties/v/vertical-align/
In below samples I added a wrapper (and span's in 2:nd sample, with font size matching the pseudo's size) to show how they interact and how you can do to make the outcome look better.
Note: As suggested by "Vangel Tzo", flex is one way that does the job better.
.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

You could use display: flex for parent element (.status) and the align-self: center property to center it vertically.
.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%;
}
An example: http://codepen.io/srekoble/pen/BKWJgx

Answer 3

As #LGSon explaination, the vertical-align is not a magical css, and its behaviour is never trusted by me. So I suggest an alternative way to align your elements in the way you want.
Because you already put position:relative in the .status, I suggest to use position:absolute to style for your generated content and it is more consistent between each browsers.
A codepen example: http://codepen.io/thovo/pen/MypQbW

Answer 4

try below code for horizontaly center code.
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;}
try below code for verticaly center code.
.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;}