在div中垂直對齊可變大小的圖像？

編輯：給任何人閱讀這篇文章的一個提示，它不適合我的全部理由是因爲我使用了DOCTYPE TRANSITIONAL。在HTML或CSS中沒有任何變化，切換到DOCTYPE STRICT使它工作。這至少適用於Chrome，FF和IE8。在div中垂直對齊可變大小的圖像？

我已經嘗試了許多在線提供的許多解決方案，並沒有一個似乎爲我工作。我想垂直對齊div中的圖像（圖像已經水平對齊）。

圖像可以是任何寬度和任何高度（高達70px），所以我不能使用固定的邊距或類似的東西。

這裏是我的HTML + CSS：

<head> 
    <style type="text/css" media="all"> 
    #list ul { 
     list-style: none; 
     margin: 0px; 
     padding: 0px; 
    } 
    #list li { 
     border: 2px solid #DDD; 
     margin-bottom: 3px; 
     height: 110px; 
    } 
    #image { 
     width: 75px; 
     height: 110px; 
     line-height: 110px; 
     float: left; 
    } 
    #image img { 
     vertical-align: middle; 
     display: block; 
     margin: auto; 
    } 
    #event { 
     margin-left: 75px; 
    } 
    </style> 
</head> 

<body> 
<div id='container'> 
    <div id="list"> 
     <ul> 
      <li> 
       <div id='image'> 
        <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/> 
       </div> 
       <div id='event'> 
        <h1>Text</h1> 
        <h2>More Text</h2> 
       </div> 
      </li> 
      <li> 
       <div id='image'> 
        <img src='http://sstatic.net/stackoverflow/img/favicon.ico'/> 
       </div> 
       <div id='event'> 
        <h1>Text</h1> 
        <h2>More Text</h2> 
       </div> 
      </li> 
     </ul> 
    </div> 
</div> 
</body> 
</html>

來源

2011-08-01 Kevin Cooper

您不能在塊元素上使用vertical-align。一個圖像通常是一個內聯元素，但你有明確的設置爲display: block。刪除它，並將父div的line-height設置爲div的高度。

在這裏工作：http://jsfiddle.net/YnzR9/1/

#image { 
    width: 75px; 
    height: 100%; 
    float: left; 
    line-height: 110px; 
    text-align: center; 
} 
#image img { 
    vertical-align: middle; 
}

來源

2011-08-01 21:02:20 gilly3

現在，圖像**不是水平居中，仍然不是垂直居中，而且我的文字行很大（由於它們每個都有110px的行高）。也許我理解錯了？ –

您正在使用'margin：auto'來對其進行居中處理，這對內聯元素無效。相反，在父元素上使用'text-align：center'。在此修復：http://jsfiddle.net/YnzR9/1/ – gilly3

非常感謝！ –

設置div的「行高」相同的值作爲div的高度。

更新：假設您希望圖像垂直對齊和居中，請使用以下內容。

#image { 
    width: 75px; 
    height: 110px; 
    float: left; 
    line-height: 110px; 
    text-align:center; 
} 
#image img { 
    vertical-align: middle; 
}

來源

2011-08-01 20:53:12 pdubs

這不能解決任何東西： #image { 寬度：960x75像素; height：110px; \t line-height：110px; float：left; } –

你沒有說哪個div放行高，我想我試了一下，沒有任何工作。 –

gilly3提到'display：block'否定行高。假設你想要圖像垂直對齊和居中，請參閱更新的帖子。 – pdubs

在div中垂直對齊可變大小的圖像？

回答

相關問題