CSS中心浮动李

Question

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

目标：

======＆gt;＆gt;＆gt;

我的尝试：

我的尝试总是会导致这个

Jsbin：

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

编辑：

#wrapper的宽度不固定！我只使用320px来显示结果图片！

Answer 1

首先，从float: left;中删除.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;
}

Working JSBin demo

在旁注中，您不需要那些!important声明中的任何。没有它们的造型是完全相同的。如果您需要覆盖现有样式，则应该查看CSS Specificity。

Answer 2

您必须将固定宽度设置为ul。因此，在您的示例中，每个li的每边都有 118px 的宽度和 2px 的边距。要将两个li排成一行，请将其设置为.widgetPhotoGallery .photogallery：

width: 244px;

请注意，背景会变小，因此您只需将其放到.widgetPhotoGallery .widgetContent

即可

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

<强> Here's the update JSbin

Answer 3

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

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

如果您愿意，可以使用媒体查询在特定断点处设置固定宽度，或者您可以使用max-width代替width

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

您可能不喜欢这个答案（根据您的大字体判断，#wrapper不是固定宽度的粗体评论），但没有其他方法可以达到您想要的效果。