Html CSS将文本垂直对齐到div的中间
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16172954/
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
CSS to vertically align text to middle of div
提问by Roger
What is the correct way to force text in a div to vertically align to the middle? I have found a couple 'tricks', but I need something that works with a single line and multiple lines. Hopefully I am missing something stupid simple:
强制 div 中的文本垂直居中对齐的正确方法是什么？我发现了一些“技巧”，但我需要一些可以处理单行和多行的东西。希望我错过了一些愚蠢的简单：
http://jsfiddle.net/rogerguess/DawFy/
http://jsfiddle.net/rogerguess/DawFy/
.header {
display: inline-block;
text-align: center;
width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
vertical-align: middle;
}
<div >
<div class="header">test1 </div>
<div class="header">some text that will wrap</div>
<div class="header">test3</div>
</div>
回答by Tiago César Oliveira
Change display: inline-block;to display: table-cell;
更改display: inline-block;为display: table-cell;
回答by cimmanon
If your multi-line elements need to wrap for responsive reasons, then your best bet is with Flexbox. Due to the flakiness of Firefox's 2009 Flexbox implementation, it has to be handled slightly differently than you would do it for modern Flexbox implementations.
如果您的多行元素出于响应性原因需要换行，那么您最好的选择是使用 Flexbox。由于 Firefox 2009 Flexbox 实现的脆弱性，它的处理方式必须与现代 Flexbox 实现略有不同。
http://codepen.io/cimmanon/pen/mxuFa
http://codepen.io/cimmanon/pen/mxuFa
<ul>
<li>One lorem ipsum dolor sit amet</li><!--
--><li>Two</li><!--
--><li>Three</li><!--
--><li>Four</li><!--
--><li>Five</li>
</ul>
li {
text-align: center;
vertical-align: middle;
/* fallback for non-Flexbox browsers */
display: inline-block;
/* Flexbox browsers */
display: -webkit-inline-box;
display: -moz-inline-box;
display: -ms-inline-flexbox;
display: -webkit-inline-flex;
display: inline-flex;
/* vertical centering for legacy, horizontal centering for modern */
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
/* modern Flexbox only */
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
/* legacy Flexbox only */
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
}
回答by Sorin Haidau
I've made a quick example for you, using display: table-cell property on the parent div.
我为你做了一个简单的例子，在父 div 上使用 display: table-cell 属性。
CSS:
.outer {
width: 500px;
height: 500px;
display: table-cell;
background-color: red;
vertical-align: middle;
}
.inner {
display: block;
width: 300px;
height: 200px;
margin: 0px auto;
background-color: yellow;
}
HTML:
<div class="outer">
<div class="inner">
</div>
</div>
HTML：
<div class="outer">
<div class="inner">
</div>
</div>
回答by DOTNET Team
Try this, it will work.
试试这个，它会起作用。
<div class="greenBorder" id="outer">
<div id="middle">
<div class="greenBorder" id="inner">
Your Text Here
</div>
</div>
</div>
Css Class
CSS类
#outer {
height: 100%;
overflow: hidden;
position: relative;
width: 100%;
display: table;
position: static;
}
div.greenBorder {
background-color: #39B9FF;
text-align: center;
color: white;
}
#middle[id] {
display: table-cell;
position: static;
vertical-align: middle;
width: 100%;
}
#middle {
position: absolute;
top: 50%;
}
回答by Helzgate
Most of these solutions wouldn't work for me because either the height was manually specified (which I couldn't do) or things like inline-block and float would remove the ability for the an inner div to inherit the parent div's height. I ended up creating a table with two columns each containing my divs and then I had no issues vertically centering text.
大多数这些解决方案对我不起作用，因为高度是手动指定的（我不能这样做）或者像 inline-block 和 float 这样的东西会删除内部 div 继承父 div 高度的能力。我最终创建了一个包含两列的表格，每列包含我的 div，然后我没有垂直居中文本的问题。
回答by EntryLevel
.header {
display: block;
text-align: center;
width: 123px;
background: green;
border-radius: 4px 4px 4px 4px;
height: 80px;
margin:0px auto;
}
li
{
list-style-type:none;
}
<div >
<li>
<div class="header">test1 </div>
<li>
<div class="header">some text that will wrap</div>
<li>
<div class="header">test3</div>
Try this dont know if its "correct" but works
试试这个不知道它是否“正确”但有效
