0

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">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
</div>
Jean-François Fabre
  • 137,073
  • 23
  • 153
  • 219
al404IT
  • 1,380
  • 3
  • 21
  • 54

2 Answers2

3

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">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </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">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
</div>
kukkuz
  • 41,512
  • 6
  • 59
  • 95
0

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;
Afrophysics
  • 579
  • 3
  • 14