Div表格单元垂直对齐不起作用

Question

我想简单地使用DIV和显示类型作为表格单元水平和垂直居中文本，但它不能在IE8或Firefox中工作。

下面是我使用的CSS，这就是所有在HTML页面中的CSS。

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

我在做什么错？

Answer 1

我认为table-cell需要有父母display:table元素。

Answer 2

你可以垂直对齐浮动元素的方式，在IE 6+的作品。它也不需要全表标记。这种方法并不十分干净 - 包括包装，还有一些需要注意的事情，例如，如果你的文本太多，容器会突然出现 - 但它很不错。

---

简短的回答：你只需要申请display: table-cell一个元素内浮动元素（表细胞不浮动），并使用回退与position: absolute和top旧IE。

---

龙答：这里有一个jsfiddle showing the basics。总结重要的东西（用条件注释添加使用.old，即类）：

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

下面是用这种方法jsfiddle that deliberately highlight the minor faults。请注意：

• 在标准浏览器中，超出包装器元素高度的内容停止居中并开始向下翻页。这不是一个大问题（可能看起来比爬页面更好），可以通过避免太大的内容来避免（请注意，除非我忽略了某些内容，像overflow: auto;这样的溢出方法似乎不起作用）
• 在旧的IE中，内容元素不会伸展以填充可用空间 - 高度是内容的高度，而不是容器的高度。

这些都是非常小的限制，但值得注意。

Code and idea adapted from here

Answer 3

这是我要做的事：

CSS：

html, body { 
    margin: 0; 
    padding: 0; 
    width: 100%; 
    height: 100%; 
    display: table 
} 
#content { 
    display: table-cell; 
    text-align: center; 
    vertical-align: middle 
} 

HTML：

<div id="content"> 
    Content goes here 
</div> 

见

Example of vertical centering

和

CSS: centering things。

Answer 4

因为你还在使用浮动...

尝试删除“浮动”，并显示其包装：表

例如：

<div style="display:table"> 
<div style="display:table-cell;vertical-align:middle;text-align:center"> 
     Hai i'm center here Lol 
</div> 
</div> 

Answer 5

设置父元素的高度。

Answer 6

与其他包装浮点数，不使用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> 

Answer 7

看到这个箱子： http://jsbin.com/yacom/2/edit

应该父元素设置为

display:table-cell; 
vertical-align:middle; 
text-align:center; 

Answer 8

有时浮动制动垂直对齐，更好地避免它们。

Answer 9

样式如下将被垂直地对准，以中间的元件：

.content{ 
    position:relative; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%); 
    top:50%; 
} 

然而，父元素必须有一个固定的高度。 看到这个提琴：https://jsfiddle.net/15d0qfdg/12/

Answer 10

在我的情况下，我想中心在一个父容器与位置：绝对。

<div class="absolute-container"> 
    <div class="parent-container"> 
     <div class="centered-content"> 
      My content 
     </div> 
    </div> 
</div> 

我不得不添加一些定位顶部，底部，左&权利。

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