中心兩者之間浮動的div

Question

我搜索周圍，但無法找到一個解決方案，

我寫了下面的HTML：

<div id="navcontainer"> 
    <div class="leftnav"> 
     <a href="/blabla.aspx">Home</a> 
    </div> 
    <div class="leftnav"> 
     <a href="/blabla.aspx">test1</a> 
    </div> 
    <div class="leftnav"> 
     <a href="/blabla.aspx">test2</a> 
    </div> 
    <div class="leftnav"> 
     <a href="/blabla.aspx">test3</a> 
    </div> 

    <div class="midnav"> 
     <a href="#">MIDDLE</a> 
    </div> 

    <div class="rightnav"> 
     <a href="/blabla.aspx">test5</a> 
    </div> 

    <div class="rightnav"> 
     <a href="/blabla.aspx">test6</a> 
    </div> 
</div> 

用下面的CSS：

#navcontainer div.leftnav 
{ 
    float:left; 
    text-align: left; 
    vertical-align: middle; 
    margin-left:6px; 
    margin-top:6px; 
} 

#navcontainer div.midnav 
{ 
    // 
    // What do I put here? 
    // 
} 

#navcontainer div.rightnav 
{ 
    float:right; 
    text-align: left; 
    vertical-align: middle; 
    margin-right:6px; 
    margin-top:6px; 
} 

我想中心基於「navcontainer」的MIDDLE div，但div始終基於有多少'leftnav''rightnav'divs。任何人都可以向我解釋如何做到這一點？

Answer 1

想出了什麼，我認爲你正在尋找一個更好的解決方案 - 在這種情況下，我絕對定位的midnav：

#navcontainer { 
    position: relative; 
} 
#navcontainer div.midnav { 
    position: absolute; 
    left: 50%; 
} 

這裏有一個更新的jsfiddle證明。那是你想要做什麼？由於絕對定位，您需要調整midnav的CSS以使元素與左側和右側導航元素垂直對齊。