CSS无法在锚内联块内对齐中间文本

Question

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

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

https://jsfiddle.net/0cah0jcw/

＆＃13;

＆＃13;

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

＆＃13;

<div class="outer">
  <nav class="inner">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您可以使用伪元素 垂直对齐 inline-block元素，如下所示：

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

见下面的演示：

＆＃13;

＆＃13;

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

＆＃13;

<div class="outer">
  <nav class="inner">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.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*/
}

＆＃13;

<div class="outer">
  <nav class="inner">
    <a href="#">link</a>
    <a href="#">link</a>
    <a href="#">link</a>
  </nav>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

此处的解决方案： https://jsfiddle.net/0cah0jcw/4/

我用＆＃34;显示：inline-flex＆＃34;为了切换到更容易垂直对齐的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;