垂直對齊和行高神祕

它只是開始我發瘋了，因爲我不明白爲什麼下面的CSS模板的垂直對齊確實只有一個空的HTML文件的工作：垂直對齊和行高神祕

<head> 
<style> 
     #mylist li { 
       display: inline-block; 
       list-style: none; 
       text-align: center; 
       height: 250px; 
       padding: 5px;     
     } 
     #mylist .imgcont { 
       height: 150px; 
       width: 150px; 
       line-height: 150px; 
       border: 1px solid red; 
       padding: 5px; 
       overflow: hidden;  
     } 
     #mylist img { 
       height:120px; 
       vertical-align:middle; 
     } 
</style> 
</head> 
<body> 
<ul id="mylist"> 
    <li> 
     <div class="imgcont"> 
      <img src="someimg.jpg" /> 
     </div> 
    </li> 
    <li> 
     <div class="imgcont"> 
      <img src="anotherimg.jpg" /> 
     </div> 
    </li> 
</ul> 
</body>

在「空」的HTML，意味着與<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">裸HTML模板頂部，垂直對齊是否適用，並在DIV容器圖像垂直居中
當我做了逐字複製，並插入到更復雜的HTML（風格在標題中標籤，ul-list在身體標籤的頂部）突然垂直對齊被忽略和圖像被放置在容器的頂部。根本無法理解在這裏可以發揮什麼作用。

我甚至試圖預先安排「clear：both」風格但沒有效果。

有什麼想法？

更新 - 添加截圖兩種情況 vertical-align in plain html above example merged with some complex html, vertical-align ignored

來源

2012-11-23 David Unric

在第二個示例中，忽略垂直對齊並將圖像對齊到div容器的頂部。由相同的CSS/HTML代碼。 –

如果您對Rishi的回答感到滿意，請不要忘記接受它。如果你想進一步瞭解爲什麼你的初始方法被打破，你將需要提供HTML的垂直對齊被忽略的情況。 – Alohci

您可能會發現下面的代碼，如果有幫助，否則請你做了什麼提供了一些截圖和你所期望的..

#mylist .imgcont { 
      height: 150px; 
      width: 150px; 
      line-height: 150px; 
      border: 1px solid red; 
      padding: 5px; 
      overflow: hidden; 
      display:table-cell; 
      vertical-align:middle; 
      text-align:center;  
    }

它給了我下面的輸出：

enter image description here

來源

2012-11-23 15:37:36

不幸的是'位置：親戚'沒有區別。我用示例截圖和描述更新了問題。 –

檢查此代碼爲您的div。 –

'vertical-align：middle;'僅適用於內聯兄弟元素。 – gingerbreadboy

垂直對齊和行高神祕

回答

相關問題