html - 垂直对齐 block 元素中的文本

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

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>但我真的不想添加任何更多的标记。

最佳答案

根据CSS Flexible Box Layout Module ，您可以将 a 元素声明为 flex 容器(见图)并使用 align-items 来垂直沿横轴(垂直于主轴)对齐文本。

enter image description here

您需要做的就是:

display: flex;
align-items: center;

查看此 fiddle .

关于html - 垂直对齐 block 元素中的文本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/5166574/