Html Div 表格单元格垂直对齐不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4005309/
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
Div table-cell vertical align not working
提问by mattgcon
I am trying to simply center text horizontally and vertically using DIV and display type as table-cell but it is not working in either IE8 or Firefox.
我试图简单地使用 DIV 将文本水平和垂直居中并将显示类型作为表格单元格，但它在 IE8 或 Firefox 中都不起作用。
Below is the CSS that I am using and that is all that is in the html page.
下面是我正在使用的 CSS，这就是 html 页面中的全部内容。
@charset "utf-8";
/* CSS Document */
html, body
{
background-color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
margin: 0;
padding: 0;
padding-top: 5px;
}
div.Main
{
background-color:#FFFFFF;
border-collapse:collapse;
width:800px;
margin-left:auto;
margin-right:auto;
}
div.MainHeader
{
color:#C00000;
font-size:18pt;
font-weight:bold;
text-align:center;
width:800px;
}
div.BlackBox
{
background-color:#000000;
color:#FFFF00;
display:table-cell;
float:left;
font-size:18pt;
font-weight:bold;
height:191px;
text-align:center;
vertical-align:middle;
width:630px;
}
div.BlackBoxPicture
{
background-color:#000000;
float:right;
height:191px;
margin-top:auto;
margin-bottom:auto;
text-align:right;
vertical-align:bottom;
width:170px;
}
What am I doing wrong?
我究竟做错了什么？
回答by meder omuraliev
I think table-cellneeds to have a parent display:tableelement.
我认为table-cell需要有一个父display:table元素。
回答by Shaquin
This is how I do it:
这就是我的做法：
CSS:
CSS：
html, body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
#content {
display: table-cell;
text-align: center;
vertical-align: middle
}
HTML:
HTML：
<div id="content">
Content goes here
</div>
See
看
and
和
回答by user56reinstatemonica8
You canvertically align a floated element in a way which works on IE 6+. It doesn't need full table markup either. This method isn't perfectly clean - includes wrappers and there are a few things to be aware of e.g. if you have too much text outspilling the container - but it's pretty good.
您可以以适用于 IE 6+ 的方式垂直对齐浮动元素。它也不需要全表标记。这种方法并不完全干净 - 包括包装器，并且有一些事情需要注意，例如，如果您有太多的文本溢出容器 - 但它非常好。
Short answer:You just need to apply display: table-cellto an element insidethe floated element (table cells don't float), and use a fallback with position: absoluteand topfor old IE.
简短回答：您只需要应用display: table-cell到浮动元素内的元素（表格单元格不浮动），position: absolute并top为旧 IE使用和使用回退。
Long answer:Here's a jsfiddle showing the basics. The important stuff summarized (with a conditional comment adding an .old-ie class):
长答案：这是一个显示基础知识的jsfiddle。总结的重要内容（带有条件注释添加一个 .old-ie 类）：
.wrap {
float: left;
height: 100px; /* any fixed amount */
}
.wrap2 {
height: inherit;
}
.content {
display: table-cell;
height: inherit;
vertical-align: middle;
}
.old-ie .wrap{
position: relative;
}
.old-ie .wrap2 {
position: absolute;
top: 50%;
}
.old-ie .content {
position: relative;
top: -50%;
display: block;
}
Here's a jsfiddle that deliberately highlight the minor faultswith this method. Note how:
这是一个jsfiddle，它故意突出了这种方法的小错误。注意方法：
- In standards browsers, content that exceeds the height of the wrapper element stops centering and starts going down the page. This isn't a big problem (probably looks better than creeping up the page), and can be avoided by avoiding content that is too big (note that unless I've overlooked something, overflow methods like
overflow: auto;don't seem to work) - In old IE, the content element doesn't stretch to fill the available space - the height is the height of the content, not of the container.
- 在标准浏览器中，超过包装元素高度的内容将停止居中并开始沿页面向下移动。这不是一个大问题（可能看起来比爬上页面更好），并且可以通过避免太大的内容来避免（请注意，除非我忽略了某些东西，否则溢出方法
overflow: auto;似乎不起作用） - 在旧的 IE 中，内容元素不会拉伸以填充可用空间 - 高度是内容的高度，而不是容器的高度。
Those are pretty minor limitations, but worth being aware of.
这些都是很小的限制，但值得注意。
回答by gm2008
An element styled as follows will be aligned vertically to middle:
样式如下的元素将垂直居中对齐：
.content{
position:relative;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
top:50%;
}
However,the parent element must have a fixed height. See this fiddle: https://jsfiddle.net/15d0qfdg/12/
但是，父元素必须具有固定的高度。看到这个小提琴：https: //jsfiddle.net/15d0qfdg/12/
回答by A. D'Alfonso
In my case, I wanted to center in a parent container with position: absolute.
就我而言，我想以 position: absolute 居中在父容器中。
<div class="absolute-container">
<div class="parent-container">
<div class="centered-content">
My content
</div>
</div>
</div>
I had to add some positioning for top, bottom, left & right.
我不得不为顶部、底部、左侧和右侧添加一些定位。
.absolute-container {
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}
.parent-container {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: table
}
.centered-content {
display: table-cell;
text-align: center;
vertical-align: middle
}
回答by Xieranmaya
see this bin: http://jsbin.com/yacom/2/edit
看到这个垃圾箱：http: //jsbin.com/yacom/2/edit
should set parent element to
应该将父元素设置为
display:table-cell;
vertical-align:middle;
text-align:center;
回答by Strikersz7
Because you still using float...
因为你还在使用浮动...
try to remove "float" and wrap it with display:table
尝试删除“浮动”并用 display:table 包裹它
example :
例子 ：
<div style="display:table">
<div style="display:table-cell;vertical-align:middle;text-align:center">
Hai i'm center here Lol
</div>
</div>
回答by Munteanu Sergiu
Sometime floats brake the vertical align, is better to avoid them.
有时浮动刹车垂直对齐，最好避免它们。
回答by bhaity
Set the height for the parent element.
设置父元素的高度。
回答by Antonio Ooi
Float it with another wrapper without using display: table;, it works:
用另一个包装器浮动它而不使用display: table;，它的工作原理：
<div style="float: right;">
<div style="display: table-cell; vertical-align: middle; width: 50%; height: 50%;">I am vertically aligned on your right! ^^</div>
</div>
