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以使元素与左右导航元素垂直对齐。

两个浮动div之间的中心

1 个答案: