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 
}