块元素中的垂直对齐文本

Question

我知道总是询问垂直对齐,但我似乎无法找到这个特定示例的解决方案.我希望文本在元素中居中,而不是元素居中:

HTML:

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

CSS:

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

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>

这真的没有CSS3属性吗？我愿意添加一个<span>,但我真的不想添加任何更多的标记.

谢谢!

Answer 1

根据CSS弹性框布局模块,可以声明的a元件作为柔性容器(见图),并使用align-items到垂直对齐沿文本交叉轴(它垂直于主轴线).

这就是你需要做的就是

display: flex;
align-items: center;

浏览器支持注意事

铬

display: -webkit-flex;
-webkit-align-items: center;

火狐

设置layout.css.flexbox.enabled为true.

或者你仍然可以使用

display: -moz-box;
-moz-box-align: center;

只知道这不是css3-flexbox,它不会包装.

IE

有人可以检查IE语法并在此处添加吗？您可以尝试使用Advanced cross-browser flexbox中的语法.

看到这个小提琴(记住要设置layout.css.flexbox.enabled到true如果你在FF).

Answer 2

你也可以试试

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

Answer 3

li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;

}

Answer 4

display: grid; place-content: center;

无需保证金。

li a {
    width: 300px;
    height: 100px;
    display: grid;
    place-content: center;
    background: red;
}

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

Answer 5

您可以尝试使用display：inline-block和：after。

的HTML

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

的CSS

li a {
    width: 300px;
    height: 100px;
    margin: auto 0;
    display: inline-block;
    vertical-align: middle;
    background: red;  
}
li a:after {
  content:"";
  display: inline-block;
  width: 1px solid transparent;
  height: 100%;
  vertical-align: middle;
}

请观看演示。