垂直对齐块元素中的文本

Question

我知道垂直对齐总是被问及，但我似乎无法为这个特定示例找到解决方案。我希望文本在元素内居中，而不是元素本身居中：

 li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: block;
    background: red;
}

 <ul>
    <li><a href="">I would like this text centered vertically</a></li>
</ul>

真的没有 CSS 属性吗？我愿意在其中添加 <span> ，但我真的不想添加更多的标记。

原文由 user623520 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

根据 CSS Flexible Box Layout Module ，您可以将 a 元素声明为 flex 容器（见图）并使用 align-items 沿 交叉轴 垂直 对齐文本（垂直到 主轴）。

您需要做的就是：

 display: flex;
align-items: center;

看到这个 小提琴。

原文由 melhosseiny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

你也可以试试

a {
  height:100px;
  line-height:100px;
}

原文由 ericbae 发布，翻译遵循 CC BY-SA 3.0 许可协议