中心标志在ul？

Question

我知道很多人都试图这样做，并制定了一些恰好可以解决的系统，或者只是为了“顺便”，但是最好的方法是什么？我有几乎完整的东西，但由于某种原因，徽标不是居中，而是整个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

最简单的方法，尽管是一个巨大的黑客，只是给左和右<li>一个百分比width，比方说，40％左右。然后它们会保持相同的尺寸，同时在中间留下一点间隙。

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

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

这只是说：ul应该是一个flexbox（意味着它的所有子节点应该排成一行并填充可用空间），并且任何额外的空间应该以1的比例给予链接： 1。

这是crappy fiddle。

缺点是这只适用于pretty recent browsers，特别是IE10是第一个支持它的IE。 和对语法进行了三次修改，所以你也需要支持这些修改，也许还需要这样的Sass flex mixin（即使你写的也是一个有用的参考资料）静态CSS）。

另一方面，您可以使用两种方法。不了解flexbox的浏览器会服从inline-block而只是看到稍微偏离中心的徽标。