html - CSS 中心浮动 li

Question

我有 ul 其中li元素向左浮动。我想将这些 li 元素对齐到 ul 的中心。

目标：

======>>>

我的尝试：

我的尝试总是导致这个

杰宾：

http://jsbin.com/EGoVAg/19/edit

编辑：

#wrapper 的宽度不固定！我使用 320px 只是为了向您展示结果图片！

Answer 1

首先，删除float: left;from .widgetPhotoGallery li.photo。display: inline-block（已包含在内）是正确定位元素所需的全部内容：

.widgetPhotoGallery li.photo{
    background-color: blue;
    padding: 0;
    margin: 0;
    position: relative;
    display: inline-block;
}

然后你需要做的就是简单地给你ul一些填充（36px两边均匀）：

.widgetPhotoGallery .photogallery{
    background-color: lime;
    list-style: none;
    padding:0 36px;
    margin: 0 auto;
    text-align: left;
}

工作 JSBin 演示。

附带说明一下，您不需要任何这些!important声明。没有它们的样式是相同的。如果您需要覆盖现有样式，则应改为查看CSS Specificity。

Answer 2

您必须将固定宽度设置为ul. 所以在你的例子中，每边li都有118px的宽度和2px的边距。要li连续放置两个，请将其设置为.widgetPhotoGallery .photogallery：

width: 244px;

注意背景会变小，所以你可以简单的把它放到.widgetPhotoGallery .widgetContent

.widgetPhotoGallery .widgetContent {
    background-color: lime;
}

这是更新 JSbin。

Answer 3

您唯一的选择是设置固定宽度并执行以下操作：

#wrapper {
 display: block;
 margin: 0 auto; /* center it */
 width: XXX;
}

如果愿意，您可以使用媒体查询在某些断点处设置固定宽度，或者您可以使用max-width而不是width

http://jsbin.com/EGoVAg/23/edit

你可能不喜欢这个答案（从你的大字体来看，关于#wrapper 不是固定宽度的粗体评论），但没有其他方法可以实现你想要的。