Html CSS中心浮动李

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

目标： =======>>>

我的尝试： 我的努力总是这样

Jsbin：

编辑：

---

#包装的宽度不是固定的！我用320px只是给你看结果图片 首先，删除

float:left来自
.widgetPhotoGallery li.photo
<代码>显示：内联块（已包含）是正确定位元素所需的全部：

.widgetPhotoGallery li.photo{
背景颜色：蓝色；
填充：0；
保证金：0；
位置：相对位置；
显示：内联块；
}

然后你只需要给你的
ul
一些填充（
36px
两边都要均匀）：


顺便说一句，你不需要这些
！重要的
声明。没有它们，样式是相同的。如果您需要覆盖现有样式，则应改为查看。
您必须将固定宽度设置为
ul
。因此，在您的示例中，每个
li
在每侧都有118px的宽度和2px的边距。要在一行中容纳两个
li
，请将其设置为
.widgetPhotoGallery.photogallery
：

width: 244px;

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

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

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

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

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


您可能不喜欢这个答案（从您的大字体、粗体注释“包装器不是固定宽度”判断），但没有其他方法可以实现您的要求。
您不能只将元素设置为
display:inline block并使用
文本对齐：居中？@feeela，当您在水平空间中没有足够的空间时，会产生图片；检查您的填充物和边框-1代表
！重要信息
（由于添加了替代版本，已还原）@Grevling我已经为该类中的li元素实现了glogal选项，因此我需要在此类中重写它们case@feela
！重要信息
在OP的代码中。这不是我添加的任何内容。@Ing.MichalHudak您应该调查一下<代码>！“重要的”
几乎总是个坏主意。@JamesDonnelly我知道，但环境迫使我这么做。谢谢你的关心：）我无法设置修复width@Ing.MichalHudak，你能解释一下原因吗？因为如果没有固定的宽度，您在这里试图实现的目标可能是不可能的。@matewka我把代码放在#wrapper中，这样您就可以看到我需要什么，试着认为宽度是%，然后呢？示例：包装为100%。@Adam，它无法解决问题。OP希望
li
s向左对齐。@matewka-我的错。我误解了这个问题，就像另一个答案一样。
#wrapper {
 display: block;
 margin: 0 auto; /* center it */
 width: XXX;
}