我有一个无序列表,中心列表项中有一个 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>
这将是它的输出方式:
最佳答案
这其实并不难。看一下 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 的链接.
关于html - 当元素具有不同宽度时,中间 li 元素直接居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31850340/