如何将未知宽度的无序列表水平居中？

将未知宽度的无序列表水平居中

当使用一组表示为无序列表的链接创建页脚时，通常会出现以下情况：最好将列表在页脚 div 内水平居中。虽然将文本元素或已知宽度的元素居中很简单，但将未知宽度的无序列表居中却是一个挑战。

内联列表项

如果列表项可以内联显示，解决方案很简单：

<code class="css">#footer { text-align: center; }
#footer ul { list-style: none; }
#footer ul li { display: inline; }</code>

阻止列表项

但是，在某些情况下，可能需要使用 display: block;在列表项上。在这种情况下，需要稍微复杂一点的解决方案：

<code class="css">#footer { width: 100%; overflow: hidden; }
#footer ul { list-style: none; position: relative; float: left; display: block; left: 50%; }
#footer ul li { position: relative; float: left; display: block; right: 50%; }</code>

此 CSS 将无序列表放置在页脚 div 的中心，并偏移列表项，以便它们在列表内水平对齐。

以上是如何将未知宽度的无序列表水平居中？的详细内容。更多信息请关注PHP中文网其他相关文章！