在DIV中垂直對齊，在div內部有一個塊元素

這一直讓我發瘋，從來沒有找到正確的答案。在DIV中垂直對齊，在div內部有一個塊元素

我要實現以下目標： http://juicybyte.com/stack-overflow.jpg

含義，我想對左邊一個div，和文字，精美的垂直贊同取決於有多少內容有一個形象。文本div的高度可以固定。

但是，一切都沒有去。

<div id="widgetWhite"> 
<div id="widgetWhiteIcon"> 
    <a href="#" title="White"><img src="/images/iconWhiteIconTn.png" alt="White Icon" /></a> 
</div> 
<div id="widgetWhiteContent"> 
    <p>I would love it if this worked.</p> 
    <a href="#">Download PDF</a> 
</div> 
</div>

的CSS：

#widgetWhiteIcon { 
width: 82px; 
margin: 0 10px 0 20px; 
display: inline-block; 
vertical-align: middle; 
} 

#widgetWhiteContent { 
width: 108px; 
font: normal normal 11px/14px Arial, sans-serif; 
height: 110px; 
display: inline-block; 
vertical-align: middle; 
} 

#widgetWhiteContent a { 
color: #f37032; 
}

真的不關心IE6.0，IE7.0，但不幸的是需要。

感謝您的幫助！

來源

2012-01-10 Hugo

這些天你的問題可以概括爲 - 如何在IE7中垂直對齊？對於所有其他瀏覽器，您可以使用'display：table'。對於IE7請遵循本指南。 http://www.jakpsatweb.cz/css/css-vertical-center-solution.html – mrtsherman 2012-01-10 05:59:09

正如對IE7支持的說明 - MS已決定在2012年上半年沒有及時將用戶升級到IE8/9。根據您的人口統計（歐盟，美國），我預計到年中IE7的支持率將下降至1％。所以也許IE7可能沒有你想象的那麼重要。 IE7現在五歲了！ – mrtsherman 2012-01-10 15:29:37

是的，我並不真的支持它，但即使我向他們展示了統計數據，我的客戶仍然堅持這樣做。 – Hugo 2012-01-10 16:12:57

您必須首先爲包裝div（div＃widgetWhiteContent）設置一個固定的高度，以便垂直對齊起作用。要使div＃widgetWhiteContent與div＃widgetWhiteIcon垂直對齊，兩個div都應位於同一高度。

所以一個好的解決方案是設置外部div的高度，然後將兩個子div的高度設置爲100％。

你的CSS是這樣的

<style> 
    #widgetWhite { 
     height: 110px; 
    } 

    #widgetWhiteIcon { 
     width: 82px; 
     margin: 0 10px 0 20px; 
     display: inline-block; 
     height: 100%; 
    } 

    #widgetWhiteContent { 
     clear: left; 
     width: 108px; 
     font: normal normal 11px/14px Arial, sans-serif; 
     height: 100%; 
     display: inline-block; 
     vertical-align: middle; 
    } 

    #widgetWhiteContent a { 
     color: #f37032; 
    } 
</style>

來源

2012-01-10 04:44:03

我很困惑爲什麼diplay：inline-block不起作用。我以爲我會這樣做，然後做IE7.0顯示：inline-block hack讓它在IE7.0中工作。但是我的代碼不能以任何形式工作。 – Hugo 2012-01-10 16:30:01

在這裏，我放在一起的解決方案爲您根據我掛在網站上。我沒有打擾將現有的CSS映射到它，但我認爲你會明白。

http://jsfiddle.net/M3h6v/5/

<div class="ie7vert1"> 
    <a href="#" title="White"><img src="http://placehold.it/120x150" alt="White Icon" /></a>    
    <div class="ie7vert2"> 
     <div class="ie7vert3">   
      <p>I would love it if this worked.</p> 
      <a href="#">Download PDF</a> 
      <br style="clear: both;" /> 
     </div> 
    </div> 
</div>

.ie7vert1 { 
    display: table; 
    #position: relative; 
    overflow: hidden; 
    border: 1px dashed gray; 
    float: left; 
    width: 100%; 
} 

.ie7vert2 { 
    #position: absolute; 
    #top: 50%; 
    display: table-cell; 
    vertical-align: middle; 
} 

.ie7vert3 { 
    #position: relative; 
    #top: -50%; 
    border: 1px dashed red; 
}

來源

2012-01-10 06:35:28 mrtsherman

這適用於除IE7以外的所有瀏覽器。在IE7中，文字落後於圖標，這真的很奇怪。 – Hugo 2012-01-10 16:20:04

對不起，我正在清理CSS，隨後在IE7中破壞了我的代碼。請看看這個。 http://jsfiddle.net/M3h6v/5/ – mrtsherman 2012-01-10 16:33:08

工作！你做了什麼不同/失蹤了什麼？我正準備放棄並去一張桌子：P – Hugo 2012-01-10 16:38:03

的vertical-align酒店使用的兩個先決條件：

您嘗試垂直對齊必須是兄弟姐妹中的元素。
您嘗試垂直對齊的元素不能是塊級元素。

話雖這麼說，這其實是很容易解決：

<div id="widgetWhite"> 
    <div id="widgetWhiteIcon"> 
     <a href="#" title="White"><img src="http://placehold.it/100x100" alt="White Icon" /></a> 
    </div><div id="widgetWhiteContent"> 
     <p>I would love it if this worked.</p> 
     <a href="#">Download PDF</a> 
    </div> 
</div>

注意結束的div爲#widgetWhiteIcon和#widgetWhiteContent開幕DIV是感人：</div><div id="widgetWhiteContent">。這允許您控制這兩個元素之間的間距，因爲標記中的inline元素之間通常會有任何空格顯示在演示文稿中。

編輯：你能等效設置#widgetWhitefont-size: 0無需擔心空白。font-size是繼承於子元素，所以你需要明確設置後，像這樣：#widgetWhite { font-size: 0; } #widgetWhite * { font-size: 12px; }

CSS：

p { margin: 0; } 
#widgetWhite > div { 
    vertical-align: middle; 
    display: inline-block; } 
#widgetWhiteContent { margin: 0 0 0 4px; } 
#widgetWhiteContent a { 
    margin: 1em 0 0; 
    display: block; }

前瞻：http://jsfiddle.net/Wexcode/DcWB8/

來源

2012-01-10 17:47:28 Wex

在DIV中垂直對齊，在div內部有一個塊元素

回答

相關問題