Centering icon with vertical-align in inline-block - css

Question

I don't understand why vertical-align: middle makes an icon not being centered, but a little lower.
HTML:
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
scss:
.operatorscreen {
&__single-button {
&:first-child {
margin-bottom: 10px;
}
}
&__link {
color: black;
text-decoration: none;
font-size: 18px;
&:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background-color: red;
}
}
}
As you can see, a red background is little lower than text, though it should be right in the center vertically.

Answer 1

Try it:
li:not(:last-child) {
margin-bottom: 10px;
}
li::before {
content: '';
width: 16px;
height: 20px;
display: inline-block;
vertical-align: sub;
background-color: red;
}
<ul>
<li>First icon</li>
<li>Second icon</li>
</ul>

Answer 2

When I use a ruler to measure, it looks like vertical-align: middle is behaving correctly: it is in the middle of the lower case letters.
If you want it to be "perfect" then you may need to be more precise. There are many ideas, one quick one being:
position: relative;
top: -1px; // adjust to your desire
More on vertical-align of inline elements here: https://css-tricks.com/almanac/properties/v/vertical-align/

Answer 3

It's actually in the middle but you need to know what is the middle.
Aligns the middle of the element with the baseline plus half the x-height of the parent.ref
Here is an illustration to show the middle of the element aligned with the baseline plus half the x-height.
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background:
/*plus half x-height*/
linear-gradient(green,green) 0 calc(16px - 0.5ex)/100% 1px no-repeat,
/*the baseline*/
linear-gradient(#000,#000)0 16px/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: middle;
background:
linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>
In your particular case, use top (or text-top, text-bottom, sub) instead of middle and you will be closer to the middle you expect:
.operatorscreen__single-button:first-child {
margin-bottom: 10px;
}
.operatorscreen__link {
color: black;
text-decoration: none;
font-size: 18px;
background: linear-gradient(#000,#000)center/100% 1px no-repeat;
}
.operatorscreen__link:before {
content: "";
display: inline-block;
width: 16px;
height: 20px;
font-size: 100px;
margin-right: 12px;
vertical-align: top;
background:linear-gradient(#000,#000) center/100% 1px no-repeat;
background-color: red;
}
<ul class="operatorscreen__buttons">
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">First icon</a>
</li>
<li class="operatorscreen__single-button">
<a class="operatorscreen__link button-link button-block button-link_outline" href="#">Second</a>
</li>
</ul>