試圖垂直對齊格內div

我想垂直對齊另一個div在底部的div，我不想使用相對/絕對定位。下面是我的標記。它似乎工作。但我不確定這是否是最佳解決方案。任何人都可以推薦更好的方法？另外，在FF中，如果我刪除容器周圍的邊框，它將停止工作。有誰知道爲什麼？感謝康斯坦丁試圖垂直對齊格內div


<html> 
<head> 
    <style type="text/css"> 
     .container 
     { 
      background-color: #ffff00; 
      height: 100px; 
      line-height: 100px; 
      border: solid 1px #666666; 
     } 
     .container .content 
     { 
      margin-top: 60px; 
      background-color: #ffbbbb; 
      height: 40px; 
      line-height: 40px; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
     <div class="content">test</div> 
    </div> 
</body> 
</html>

來源

2010-08-26 akonsu

是否使用絕對定位。我認爲你不想使用絕對定位的原因很可能是基於一種誤解。也就是說，如果容器有position屬性爲好，絕對定位不會在考慮到整個頁面，但在考慮到容器中，然後你會得到你想要的東西有：

.container 
{ 
    position: relative; 
} 

.container .content 
{ 
    position: absolute; 
    bottom: 0px; 
}

現在，無論大小如何，您的內容都將位於容器的底部。

來源

2010-08-26 19:33:20 Jasper

我用過這個。謝謝。同時我想把它放在中央。怎麼做？ – 2014-03-13 07:04:21

，將工作...唯一的事情是，你不能把任何東西的空頂60像素。

來源

2010-08-26 19:30:59 Dutchie432

我相信如果你正在尋找最好的解決方案，你應該確實使用相對/絕對定位。

是否有任何具體的原因，你試圖避免相對/絕對定位？

來源

2010-08-26 19:41:48

試圖垂直對齊格內div

回答

相關問題