Html 中心标志在ul？

我知道很多人都尝试过这样做，并且制定出了一些恰好可行的系统，或者只是为了“过关”，但是什么是最好的方法呢？我有一些几乎完整的东西，但由于某种原因，标志没有居中，而是整个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>

---

如何修复我的代码？

最简单的方法，尽管是一个巨大的破解，就是只给左右的

s一个百分比
宽度，比如说40%左右。然后它们保持相同的尺寸，同时在中间的标志上留有一点空白。
最好的方法是使用flexbox，它可以让您明确说出您想要的内容，即在两个文本部分之间分割任何额外的空间：

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

这只是说：
ul
应该是一个flexbox（意味着它的所有子项都应该排成一行，并填满可用空间），任何额外的空间都应该以1:1的比例分配给链接

这是一个例子

缺点是这只适用于，特别是IE10是第一个支持它的IE。语法已经有了三次修改，所以您也需要支持这些修改，也许可以使用类似的东西（这是一个有用的参考，即使您正在编写静态CSS）

另一方面，您可以使用这两种方法。不理解flexbox的浏览器将遵循
内联块
，只看到稍微偏离中心的徽标。
，如果您不介意放弃IE 9和以下版本的话。我确实需要这些。有css的方法吗？flexbox是css:）只是最近才出现。你能用JSFIDDLE链接我吗？这是一种方法，但我希望它是非黑客的
.navbar ul {
    display: flex;
}
.navbar li.navbarLinks {
    flex: 1;
}