CSS无法在anchor inline-block [duplicate]内对齐中间文本

Question

这个问题在这里已有答案：

• CSS center text (horizontally and vertically) inside a div block 22回答

我无法在显示块锚点内垂直对齐文本，该锚点必须是容器的100％。

我尝试使用vertical-align: middle但似乎被忽略了

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>

Answer 1

你可以使用像这样的伪元素垂直对齐inline-block元素：

.inner a:after {
   content: '';
   height: 100%;
   display: inline-block;
   vertical-align: middle;
 }

见下面的演示：

.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>

或者更现代的方法可能是使用flexbox - 使用display: inline-flex作为内联flexbox并使用align-items: center垂直对齐 - 请参阅下面的演示：

.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>

Answer 2

你在这里的解决方案：https://jsfiddle.net/0cah0jcw/4/

我使用“display：inline-flex”来切换到更容易垂直对齐的WAY模型。然后我使用align-content：center来居中它！

这是代码，包含最近20个浏览器版本的后备内容。

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;