CSS垂直定位，沒有高度知

我已經得到了以下菜單結構：CSS垂直定位，沒有高度知

<div class="header" style="height: 150px;"> 
    <nav id="main-nav"> 
     <div class="menu-main-menu-container"> 
      <ul id="menu"> 
       <li>menu item 1</li> 
       <li>menu item 2</li> 
      </ul> 
     </div> 
     <div class="clear"></div> 
    </nav> 
</div>

集裝箱#main-nav在這種情況下，有真實height: 20px;（所以.menu-main-menu-container有它，太）。但是，當我嘗試使用這種垂直定位整個菜單中.header：

#main-nav { 
    bottom: 0; 
    margin: auto; 
    position: absolute; 
    right: 0; 
    top: 0; 
}

的#main-nav即刻獲取.header的高度！所以，它是height: 150px;（根據Firebug），我不能垂直放置它。

我該如何垂直定位？這是我經常遇到的錯誤。當我添加top：0;和底部：0;它獲得父容器的高度。我不知道菜單的高度。

來源

2012-05-28 Atadj

當您添加頂：0，下：0您迫使它的是容器的高度 – Undefined

山姆是正確的。這不是一個錯誤，而是它應該如何工作。給一個絕對定位的元素'top：0; bottom：0;'是給父元素高度的方法。我不明白的是**你想把它放在標題內。 – Ana

標題內的確切位置？垂直居中？在底部？ – Ana

狀況的時候，家長的高度是未知的，孩子的身高知：設置top: 50%和margin-top: -10px（10px =淨資產值的高度的一半）。演示http://dabblet.com/gist/2819055

狀況的時候，父母雙方的高度和孩子是未知的：使用的height: 100%一個僞元素; display: inline &僞元素和子（NAV在這種情況下）上都vertical-align: middle - 演示http://dabblet.com/gist/2819071

來源

2012-05-28 13:00:07 Ana

-1

我在想你的意思是水平居中。在這種情況下，如果您的身高僅由CSS未知，則無法這樣做。你可以使用jQuery。看看this小提琴。

它計算菜單的高度，然後計算它的位置。

來源

2012-05-28 12:57:49

CSS垂直定位，沒有高度知

回答

相關問題