Html 垂直对齐块元素中的文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5166574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Vertical align text in block element
提问by ericbae
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:
HTML：
<ul>
<li><a href="">I would like this text centered vertically</a></li>
</ul>
CSS:
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>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.
真的没有 CSS3 属性吗？我愿意添加一个<span>，但我真的不想添加更多的标记。
Thanks!
谢谢！
回答by melhosseiny
According to the CSS Flexible Box Layout Module, you can declare the aelement as a flex container(see figure) and use align-itemsto verticallyalign text along the cross axis(which is perpendicular to the main axis).
根据CSS弹性框布局模块，可以声明的a元件作为柔性容器（见图），并使用align-items以垂直沿对齐文字交叉轴（它垂直于主轴线）。
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.enabledto true.
设置layout.css.flexbox.enabled为true。
Alternatively you can still use
或者你仍然可以使用
display: -moz-box;
-moz-box-align: center;
Just know that this is not css3-flexboxand that it will not wrap.
只要知道这不是css3-flexbox，它不会包装。
IE
IE
Can someone check the IE syntax and add it here? You can try the syntax from Advanced cross-browser flexbox.
有人可以检查 IE 语法并将其添加到此处吗？您可以尝试Advanced cross-browser flexbox 中的语法。
See this fiddle(Remember to set layout.css.flexbox.enabledto trueif you're on FF.)
看到这个小提琴（如果你在 FF 上，请记住设置layout.css.flexbox.enabled为true。）
回答by ericbae
You can also try
你也可以试试
a {
height:100px;
line-height:100px;
}
回答by Vlad
li a {
width: 300px;
height: 100px;
display: table-cell;
vertical-align: middle;
margin: auto 0;
background: red;
}
}
回答by Airen
You can try the display:inline-block and :after.Like this:
你可以试试 display:inline-block 和 :after。像这样：
HTML
HTML
<ul>
<li><a href="">I would like this text centered vertically</a></li>
</ul>
CSS
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;
}
Please view the demo.
请查看演示。
回答by Anwar
You can also use inline-tablealongside table-cellif you want to center your items vertically and horizontally. Below an example of using those display properties to make a menu:
如果您想垂直和水平居中您的项目，您也可以使用inline-table并排table-cell。下面是使用这些显示属性制作菜单的示例：
.menu {
background-color: lightgrey;
height: 30px; /* calc(16px + 12px * 2) */
}
.menu-container {
margin: 0px;
padding: 0px;
padding-left: 10px;
padding-right: 10px;
height: 100%;
}
.menu-item {
list-style-type: none;
display: inline-table;
height: 100%;
}
.menu-item a {
display: table-cell;
vertical-align: middle;
padding-left: 2px;
padding-right: 2px;
text-decoration: none;
color: initial;
}
.text-upper {
text-transform: uppercase;
}
.text-bold {
font-weight: bold;
}<header>
<nav class="menu">
<ul class="menu-container">
<li class="menu-item text-upper text-bold"><a href="javascript:;">StackOverflow</a></li>
<li class="menu-item"><a href="javascript:;">Getting started</a></li>
<li class="menu-item"><a href="javascript:;">Tags</a></li>
</ul>
</nav>
</header>It works by setting display: inline-table;to all the <li>, and then applying display: table-cell;and vertical-align: middle;to the children <a>. This gives us the power of <table>tag without using it.
它的工作原理是设置display: inline-table;所有的<li>，然后应用display: table-cell;和vertical-align: middle;到孩子<a>。这为我们提供了<table>标签的力量而无需使用它。
This solution is useful if you do not know the height of your element.
如果您不知道元素的高度，此解决方案很有用。
The compatibilty is very good (relative to caniuse.com), with Internet Explorer >= 8.
兼容性非常好（相对于caniuse.com），Internet Explorer >= 8。
回答by AJJ
Would using padding be OK for your needs?: http://jsfiddle.net/sm8jy/:
使用填充可以满足您的需求吗？： http: //jsfiddle.net/sm8jy/：
li {
background: red;
text-align:center;
}
li a {
padding: 4em 0;
display: block;
}
回答by Steve11235
Here's the general solution using just CSS, with two variations. The first centers vertically in the current line, the second centers within a block element.
这是仅使用 CSS 的通用解决方案，有两种变体。第一个在当前行垂直居中，第二个在块元素内居中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<ul>
<li>
line one
</li>
<li>
<span style="display: inline-block; vertical-align: middle">line two dot one
<br />
line two dot two</span>
</li>
<li>
line three
</li>
</ul>
<div style="height: 200px; line-height: 200px; border-style: solid;">
<span style="display: inline-block; vertical-align: middle; line-height: normal;">line two dot one
<br />
line two dot two</span>
</div>
</body>
</html>
As I understand it, vertical-align applies only to inline-block elements, e.g., <img>. You have to change an element's display attribute to inline-block for it to work. In the example, the line height expands to fit the span. If you want to use a containing element, such as a <div>, set the line-height attribute to be the same as the height. Warning, you will have to specify line-height: normal on the contained <span>, or it will inherit from the containing element.
据我了解，vertical-align 仅适用于行内块元素，例如<img>. 您必须将元素的 display 属性更改为 inline-block 才能使其工作。在示例中，行高扩展以适应跨度。如果要使用包含元素，例如 a <div>，请将 line-height 属性设置为与高度相同。警告，您必须<span>在所包含的元素上指定 line-height: normal ，否则它将从包含元素继承。
回答by RozzA
with thanks to Vlad's answerfor inspiration; tested & working on IE11, FF49, Opera40, Chrome53
感谢弗拉德对灵感的回答；在 IE11、FF49、Opera40、Chrome53 上测试和工作
li > a {
height: 100px;
width: 300px;
display: table-cell;
text-align: center; /* H align */
vertical-align: middle;
}
centers in all directions nicely even with text wrapping, line breaks, images, etc.
即使有文字换行、换行、图像等，也能很好地居中。
I got fancy and made a snippet
我很喜欢并做了一个片段
li > a {
height: 100px;
width: 300px;
display: table-cell;
/*H align*/
text-align: center;
/*V align*/
vertical-align: middle;
}
a.thin {
width: 40px;
}
a.break {
/*force text wrap, otherwise `width` is treated as `min-width` when encountering a long word*/
word-break: break-all;
}
/*more css so you can see this easier*/
li {
display: inline-block;
}
li > a {
padding: 10px;
margin: 30px;
background: aliceblue;
}
li > a:hover {
padding: 10px;
margin: 30px;
background: aqua;
}<li><a href="">My menu item</a>
</li>
<li><a href="">My menu <br> break item</a>
</li>
<li><a href="">My menu item that is really long and unweildly</a>
</li>
<li><a href="" class="thin">Good<br>Menu<br>Item</a>
</li>
<li><a href="" class="thin">Fantastically Menu Item</a>
</li>
<li><a href="" class="thin break">Fantastically Menu Item</a>
</li>
<br>
note: if using "break-all" need to also use "<br>" or suffer the consequences