CSS can't align middle text inside anchor inline-block [duplicate] - html

Question

This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 3 years ago.
I can't vertical align text inside a display block anchor that has to be 100% of container.
I try to use vertical-align: middle but seems to be ignored
https://jsfiddle.net/0cah0jcw/
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
display: inline-block;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
vertical-align: middle;
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>

Answer 1

You can vertically align inline-block elements using a pseudo element like this:
.inner a:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
See demo below:
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
display: inline-block;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
vertical-align: middle;
}
.inner a:after {
content: '';
height: 100%;
display: inline-block;
vertical-align: middle;
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>
Or a more modern approach might be to use a flexbox - use display: inline-flex for an inline flexbox and align vertically using align-items: center - see demo below:
.outer {
position: relative;
height: 400px;
}
.inner {
position: absolute;
top: 0;
bottom: 0;
text-align: center;
font-size: 28px;
font-weight: bold;
height: 100%;
border: 1px solid #000;
}
.inner a {
text-decoration: none;
border: 1px solid #ff0000;
padding-left: 18px;
padding-right: 18px;
height: 100%;
display: inline-flex;
align-items: center; /*align vertically*/
}
<div class="outer">
<nav class="inner">
link
link
link
</nav>
</div>

Answer 2

Solution for you here:
https://jsfiddle.net/0cah0jcw/4/
I used "display: inline-flex" in order to switch to the flex model which is WAY easier to vertical align with. Then I use align-content: center to center it!
Here's the code, with fallbacks for the last 20 versions of browsers.
vertical-align: middle;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;