居中2個Div內垂直

我有2個div，我想在另一個div垂直居中。目前，我有：居中2個Div內垂直

現在我明白了是怎麼回事，但我想左側的div到容器內的垂直對齊，右div的相同。但是它們是作爲一對而不是單獨地垂直對齊的。我嘗試了各種各樣的東西，但似乎無法得到它的工作。

2011-04-14 anothershrubery

他們是否固定高度或可變高度？ – 2011-04-14 10:03:17

它們實際上都是可變高度。所以基本上，容器div將與最大的內部div相同的高度，較小的div應該垂直居中。如果有必要div可以是固定的高度，但我們並不是真的想設置margin-top等 – anothershrubery 2011-04-14 10:26:42

我假設你使用'display：table-cell'，你不關心支持IE7 ？ – thirtydot 2011-04-14 10:31:07

Live Demo

從#left和#right刪除float: left。

相反，使用display: inline-block：

#left, #right { 
    display: inline-block; 
    vertical-align: middle; 
}

由於使用display: inline-block，你必須處理the whitespace issue。我選擇刪除</div>和<div id="right">之間的HTML中的空格。 See here如果你不這樣做會發生什麼。刪除空格確實是最簡單的修復，但是there are other ways。

來源

2011-04-14 10:34:22 thirtydot

我選擇根據你的[上一個問題]徹底解釋'inline-block'空白問題（http://stackoverflow.com/questions/5647365/images-have-gap-between-them）。 – thirtydot 2011-04-14 10:39:56

歡呼的解釋。我已經在實際的SharePoint頁面中嘗試了這種實現，雖然我可以從你的小提琴中看到它應該做什麼，但它似乎並沒有工作。就好像divs是以塊而不是內聯塊的形式表現的。請參閱http://jsfiddle.net/5vpA3/24/，瞭解它在我的頁面上的外觀。 IE開發工具顯示它具有display：inline-block，所以我沒有看到問題。 – anothershrubery 2011-04-14 11:10:00

當您點擊F12並調出開發工具時，正在使用什麼「文檔模式」？ – thirtydot 2011-04-14 11:11:25

是否這樣？

演示：http://jsfiddle.net/5vpA3/25/

#container 
{ 
    background-color: #FFFF00; 
} 
#left 
{ 
    height: 150px; 
    color: #FFFFFF; 
    background-color: #0000FF; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
} 
#right 
{ 
    height: 80px; 
    color: #FFFFFF; 
    background-color: #FF0000; 
    width: 100px; 
    margin-left: auto; 
    margin-right: auto; 
    position: relative; 
    left: 0px; 
    top: 0px; 
}

來源

2011-04-14 12:23:02 wdm

oops我做了我的horiz，它很早就需要咖啡因：P – wdm 2011-04-14 12:38:54

居中2個Div內垂直

回答

相關問題