在具有动态宽度的 div 中将具有固定宽度 LI 的 UL 居中答案

【问题标题】：Centering a UL with fixed width LIs in div with dynamic width在具有动态宽度的 div 中将具有固定宽度 LI 的 UL 居中
【发布时间】：2014-01-16 14:51:05
【问题描述】：

我已经在网上搜索了这个问题的答案，但无济于事。

是否可以在 100% 宽度的 DIV 中将包含固定宽度 LI 的 UL 居中？

<div style="width:100%;max-width:1400px;">
    <ul>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
    </ul>

重要的是 LI 不在 UL 中居中。

编辑：UL 的宽度也必须具有动态宽度才能填充动态宽度 DIV。

提前感谢您的帮助！

【问题讨论】：

你想让 li 元素在一行还是一列？
在一行中（当 div 小于 7x280px 时自动变为 2 行或更多行）。

标签： html css

【解决方案1】：

ul 默认也是 100% 宽。
要将其居中在周围的 div 中，您需要将 width 设置为 ul。

这是一个例子：

<div style="width:100%;max-width:1400px;">
    <ul style="width: 300px; left: 50%; margin-left: -150px;">
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
        <li style="width:280px;height:280px;>
    </ul>
</div>

注意，ul 的margin-left 是width 的一半。

【讨论】：

【解决方案2】：

那又怎样

<div style="width:100%;max-width:1400px;">
<ul style="margin:auto; width:280px">
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
    <li style="height:280px;>d</li>
</ul>
</div>e

【讨论】：

【解决方案3】：

尝试在你的 ul 中添加一个类，例如

ul .centerUL { width:500px; margin:0 auto; #centers an element }

【讨论】：