垂直居中相對於另一個元素在CSS？

我有類似以下情況：垂直居中相對於另一個元素在CSS？

<div id="container"> 
    <div id="prev"> 
    prev 
    </div> 
    <div id="content"> 
    some content 
    </div> 
    <div id="next"> 
    next 
    </div> 
</div>

哪裏是什麼，我想是的結果是這個樣子：

enter image description here

注意，一個和下一個是垂直居中參考內容，並且它全部在頁面上水平居中。

對不起，如果這已被覆蓋之前，但似乎有很多不同的方式來做類似的事情，我不確定哪些適用於這種情況。只要它在Chrome，Safari，Firefox和IE瀏覽器（不是關鍵）中運行，CSS3/HTML5就不是問題。

編輯：另外，我不確定這個問題是否真的很清楚，但我不知道內容的大小。它可能是任何東西。

編輯2：此外，內容通常是一個圖像。

來源

2011-10-06 Paul Wicks

有幾種方法可以做到這一點，我的選擇是使用顯示：容器上的table-cell和vertical-align：middle。問題是你不能把位置絕對放在容器上：

#container { 
    border: solid #000 1px; 
    display: table-cell; 
    vertical-align: middle; 
    height: 400px; 
    width: 400px; 
    text-align: center; 
} 

#container div { 
    display: inline-block; 
} 

#content { 
    border: solid #000 1px; 
    padding: 10px; 
    width: 200px; 
}

適用於IE8 +和現代瀏覽器。

http://jsfiddle.net/E97yY/

來源

2011-10-06 23:52:08 Duopixel

另一種方法，這次使用絕對定位，如果你願意改變你的HTML結構的位。請注意，如果您想使用容器限制寬度，或者可能添加另一個寬度約束包裝，則Prev和Next按鈕可以位於內容div內的任何位置，即使在內容div之外。（沒有必要，我想象。）

注意：我從這個答案中刪除了所有不必要的標記。看到小提琴的一個明顯有效的例子。

Fiddle

的HTML：

<div id="container"> 
    <div id="content"> 
     <div id="prev">prev</div> 
     <div id="next">next</div> 
     some content 
    </div> 
</div>

的CSS：

#content { 
    margin:0 auto; 
    position:relative; 
} 
#prev, #next { 
    position:absolute; 
    width:40px; 
    height:20px; 
    top:50%; 
    margin-top:-10px; /* negative half of height */ 
} 
#prev { 
    left:-45px; /* negative [width plus any desired padding] */ 
    text-align:right; 
} 
#next { 
    right:-45px; /* negative [width plus any desired padding] */ 
    text-align:left; 
}

來源

2011-10-07 00:21:12

居中元素的最好方法是使用inline-blocks和vertical-align。

這裏是一個開始小提琴：http://jsfiddle.net/kizu/7Qj3G/

在這裏你設置display: inline-block到需要的元素，添加vertical-align: middle他們，它幾乎完成。

剩下的事情是，如果你在IE中需要支持，那麼你需要通過在其上使用display: inline; zoom: 1;來「打開」塊級元素的inline-block行爲。

來源

2011-10-07 21:49:17 kizu

垂直居中相對於另一個元素在CSS？

回答

相關問題