html - ul 中的中心标志？

Question

我知道很多人都尝试过这样做，并制定了一些恰好可行的系统，或者只是为了“勉强过关”，但是最好的方法是什么？我有一些几乎完整的东西，但由于某种原因， Logo 没有居中，而是整个 ul。这就是我得到的。

但是，当文本长度相同时，这是我得到的:

这是我的 html:

<div class="navbar">

    <ul>

        <li>
            <a class="navbarLinks" href="#">Big Text Here</a>
        </li>

        <li>
            <a class="navbarLogo" href="/"><img src="images/logo.png" width="100"></a>
        </li>

        <li>
            <a class="navbarLinks" href="#">Small Text</a>
        </li>

    </ul>

    <div class="divider"></div>

</div>

还有我的CSS:

.navbar
{
    margin:0 auto;
    text-align: center;
    z-index: 9999;
    margin-top: 10px;
}

.navbar ul
{
    display: inline-block;
    list-style-type: none;
    margin:0 auto;
    padding: 0px;
}

.navbar li
{
    display: inline-block;
    list-style-type: none;
    vertical-align: middle;
}

.navbarLinks
{
    color:#ccc;
    margin: 20px;
    text-align:center;
    display:block;  
    text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
    text-decoration: none;  
    font-family: arial;
    font-size: 20pt;
    font-weight: bold;
}

.navbarLinks:hover
{
    color:#fff;
}

.navbarLogo
{
    padding-bottom: 0px;
    text-align: center;
}

如何修复我的代码？

Answer 1

最简单的方法，尽管是一个巨大的 hack，就是只给左和右 <li>百分比 width比如说，40% 左右。然后它们将保持相同的大小，同时在中间为 Logo 留出一点空隙。

最好的方法是使用 flexbox，它可以让你明确地说出你想要什么，即分割两个文本部分之间的任何额外空间:

.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}

这只是说:ul应该是一个 flexbox(这意味着它的所有 child 应该排成一排并填充可用空间)，任何额外的空间都应该以 1:1 的比例分配给链接。

这是一个 crappy fiddle .

缺点是这只适用于 pretty recent browsers ，尤其是 IE10 是第一个支持它的 IE。 并且 语法有三个修订版，因此您也需要支持这些修订版，也许像这样Sass flex mixin (即使您正在编写静态 CSS，这也是一个有用的引用)。

另一方面，您可以使用两种方法。不理解 flexbox 的浏览器会遵守 inline-block相反，只会看到一个稍微偏离中心的 Logo 。