列中的垂直中心圖像

我的HTML頁面中有兩列。列中的垂直中心圖像

<div id="content"> 
    <div id="left"></div> 
    <div id="right"></div> 
</div>

他們每個人都佔據了頁面

#left { 
    float: left; 
    width: 50%; 
} 

#right { 
    float: left; 
    width: 50%; 
}

我想中心在右欄中的圖片的一半。我知道我可以通過做margin-left: auto; margin-right: auto;來使它水平居中。我怎樣才能讓它垂直居中？

來源

2013-03-16 Mika H.

我認爲你只需要把高度100％，然後邊距自動 – Martyn0627 2013-03-16 19:36:33

你厭倦了'垂直對齊：中間'在列的div？ – Blieque 2013-03-16 19:37:59

不是一個答案，但你應該像'#left，#right {/ * styles * /}'一樣結合'＃left'和'＃right' CSS塊。編程時不應該重複任何代碼，CSS也是如此。 – 2013-03-16 19:38:43

我看到的第一個問題是沒有指定高度爲left和rightdiv s的高度;身高應該設置爲100%或任何你喜歡的值。爲了垂直居中圖像，我們可以使用絕對定位。我們將設置圖像的尺寸（這在任何情況下都是很好的做法），然後設置top:50%和left:50%屬性。儘管如此，這會將圖像推到盒子外面，所以我們添加了圖像寬度和高度的一半的負邊距。這將在每次時垂直和水平對齊div中的圖像！

下面是更新後的CSS：

#left, #right { width: 50%; height:100%; float:left; position:relative; } #right img { position: absolute; top: 50%; left: 50%; width: 80%; height: 80%; margin-top: -40%; /* Half the height */ margin-left: -40%; /* Half the width */ }

在此的jsfiddle看看：http://jsfiddle.net/bYF7F/2/。

來源

2013-03-16 19:37:40

謝謝，我明白你在做什麼。但是，圖像的大小將始終是「正確」div的80％。是否有可能擺脫這種假設，因爲有些圖像不適合以這種尺寸顯示？ – 2013-03-16 20:03:52

是的。對不起，我修好了，所以圖片在右側。而且，你完全可以擺脫這個假設。您可以使用像素值代替（儘管如果您需要響應式設計，百分比是最佳選擇）。 – 2013-03-16 20:05:32

是的，當然！我只是在實施它。 – 2013-03-16 20:26:04

-2

如果您使用TABLE而不是DIV，它將自動居中。

來源

2013-03-16 19:38:04 WilliamK

這不必要的麻煩，你不覺得嗎？ – 2013-03-16 19:56:36

沒有。事實上要簡單得多。另外，當你知道如何使用它們時，你可以更好地控制表格。 – WilliamK 2013-03-16 20:03:29

實際上，這將是一個不正確使用「表」的例子。表格僅用於表格數據。所以很確定，你可以使用它，但它會在語義上不正確。此外，表格幾乎不像'div'那樣自由流動，這是現代網站沒有使用表格進行佈局的原因之一。 – 2013-03-16 20:08:14

我知道這個問題已被標記爲已回答，但您確實提到圖片上的高度和寬度並不理想。所以我想提出另一種解決方案。

地址：

display: -webkit-flex; 
display: flex;

向右DIV和：

margin: auto;

的形象。我認爲這是你以後的樣子。看到小提琴http://jsfiddle.net/Fqa7b/

來源

2013-03-17 13:51:44 Martyn0627

列中的垂直中心圖像

回答

相關問題