html - 两个 float 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”div 的数量而变化。谁能告诉我怎么做？

Answer 1

针对我认为您正在寻找的东西提出了更好的解决方案 - 在这种情况下，我绝对定位了中导航:

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

这是一个更新的 jsfiddle展示。那是你想要做的吗？由于绝对定位，您需要调整中导航的 css 以使元素与左右导航元素垂直对齐。