垂直对齐块元素中的文本 [英] Vertical align text in block element

问题描述

我知道垂直对齐总是问，但我似乎找不到这个特定的例子的解决方案。我希望文本以元素为中心，而不是以元素为中心的元素：

HTML：

 < ul> 
< li>< a href =>我希望此文本垂直居中< / a>< / li> 
< / ul> 
  

CSS：

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

这是否真的没有CSS3属性？我愿意添加< span> ，但我真的不想添加任何更多的标记。

感谢！

解决方案

根据的语法。

查看此小提琴（记得设置 layout.css.flexbox.enabled 到 true 如果你在FF。）

I know vertical alignment is always asked about, but I don't seem to be able to find a solution for this particular example. I'd like the text centered within the element, not the element centered itself:

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

Is there really no CSS3 property for this? I'd be willing to add a <span> in but I really don't want to add any more markup than that.

Thanks!

解决方案

According to the CSS Flexible Box Layout Module, you can declare the a element as a flex container (see figure) and use align-items to vertically align text along the cross axis (which is perpendicular to the main axis).

That is all you need to do is

display: flex;
align-items: center;

Browser support considerations

Chrome

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

Firefox

Set layout.css.flexbox.enabled to true.

Alternatively you can still use

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

Just know that this is not css3-flexbox and that it will not wrap.

IE

Can someone check the IE syntax and add it here? You can try the syntax from Advanced cross-browser flexbox.

See this fiddle (Remember to set layout.css.flexbox.enabled to true if you're on FF.)

这篇关于垂直对齐块元素中的文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！