html - CSS中心 float 李

Question

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

目标:

======>>>

我的尝试:

我的尝试总是这样

jsbin:

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

编辑:

#wrapper 的宽度不固定!我使用 320px 只是为了给你看结果图片!

Answer 1

首先，从 .widgetPhotoGallery li.photo 中删除 float: left;。 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相反。