html - 当元素具有不同宽度时，中间 li 元素直接居中

Question

我有一个无序列表，中心列表项中有一个 Logo 图像。 Logo 两侧的每个列表项都具有不同的宽度。

ul 为 100%，应用了居中对齐。

我正在尝试找到一种方法，使 Logo li 完美地位于页面的中央，最好只使用 CSS。

有人知道如何实现吗？

<ul>
    <li>Dummy</li>
    <li>Dummy</li>
    <li>Dummy</li>
    <li><img src="logo.jpg" />
    <li>Dummy</li>
    <li>Dummy</li>
    <li>Dummy</li>  
</ul>

这将是它的输出方式:

Answer 1

这其实并不难。看一下 CSS:

ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
    width: 14.285714286%;
    line-height: 150px;
    text-align: center;
    margin: 0;
    padding: 0;
}

这是指向 codepen 的链接.