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

Question

我无法在必须为容器的 100% 的显示块锚点内垂直对齐文本。

我尝试使用 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;
}

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

Answer 1

此处为您解决的问题： https://jsfiddle.net/0cah0jcw/4/

我使用 "display: inline-flex" 来切换到更容易垂直对齐的 flex 模型。然后我使用 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;

Answer 2

您可以使用 伪元素 垂直对齐 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——对内联弹性框[=42=使用display: inline-flex ] 并使用 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>

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

CSS can't align middle text inside anchor inline-block

html

css

vertical-alignment