Html 如何将浮动列表居中？

这就是我的页面的外观：

现在，当我添加另一个帖子时：

它与左边对齐，但我希望它们居中

我怎样才能使它们居中

#演示{
浮动：左；
保证金：0自动；
宽度：980px；
列表样式：无；
}
#李小样{
背景#fec722；
浮动：左；
利润率：10px 0 10px 15px；
宽度：178px；
}
#演示img{
高度：243px；
保证金：3倍；
宽度：172px；
}

这并不完全相同，但这只是一个开始

值得一提的几件事

ID对于一个元素必须是唯一的，您有多个具有相同ID的列表项

要水平对齐元素，它需要显示块、设置宽度以及

auto

左右两侧的边距。这在浮动元素上不起作用。还可以使用文本对齐控制内联元素

避免页面上的浮动元素。浮动被过度使用，有更好的选项来调整内容。

这并不相同，但这只是一个开始

值得一提的几件事

ID对于一个元素必须是唯一的，您有多个具有相同ID的列表项

要水平对齐元素，它需要显示块、设置宽度以及

auto

左右两侧的边距。这在浮动元素上不起作用。还可以使用文本对齐控制内联元素

---

避免页面上的浮动元素。浮动被过度使用，有更好的选项来对齐内容。

你不能将某个内容向左浮动，同时将其对齐中心

这里我建议您避免使用浮点，而是设置

display:inline块到
li
。除了
文本对齐：居中到
ul
就成功了

以下是更新的JSFIDLE:
您不能将某个对象向左浮动，同时将其与中心对齐

这里我建议您避免使用浮点，而是设置
display:inline块到
li
。除了
文本对齐：居中到
ul
就成功了

下面是更新后的JSFIDLE:
您真正需要的是两行代码（您可以去掉所有的浮点和clearfix div）：



flexbox的优点：

最小码；效率很高



它反应灵敏
与浮动和表格不同，浮动和表格提供有限的布局容量，因为它们从未用于构建布局，flexbox是一种具有广泛选项的现代（CSS3）技术

要了解有关flexbox的更多信息，请访问：



~MDN
~CSS技巧
~YouTube视频教程


请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处的左面板中发布CSS:。更多详细信息请参见。
您真正需要的是两行代码（您可以去掉所有的float和clearfix div）：



flexbox的优点：

最小码；效率很高



它反应灵敏
与浮动和表格不同，浮动和表格提供有限的布局容量，因为它们从未用于构建布局，flexbox是一种具有广泛选项的现代（CSS3）技术

要了解有关flexbox的更多信息，请访问：



~MDN
~CSS技巧
~YouTube视频教程


请注意，所有主要浏览器都支持flexbox。一些最新的浏览器版本，如Safari 8和IE10，需要。要快速添加所需的所有前缀，请在此处的左面板中发布CSS:。更多详细信息，请参见。
首先，关于浮动
尽可能远离漂浮物。除非您有使用经验，否则它们将导致布局出现问题。90%的情况下，如果页面上存在浮点数问题，则浮点数就是问题所在。相反，您应该使用
display:inline block
，这是自切片面包以来最好的东西

浮动可以用于将图像放入文本段落，然后允许文本自然地围绕图像流动。除此之外，你可能会找到更好的方法来实现你的目标

接下来是间距
所以你有一些间距问题。一般来说，尽可能远离利润（有点像浮动，但不是那么糟糕）。边距增加了框的大小，而不是包含在其中，而且它们可以在不同的情况下做其他时髦的事情。如果必须使用边距，请使用边距，但尽量避免使用边距。相反，尽可能使用填充。您可以使用容器元素，然后对其应用填充，以提供边距的外观

对于内联块元素，HTML中标记之间的空间将作为单个空间呈现。要解决此问题，请将父元素的字体大小设置为0，然后重置子元素的字体大小（所有现代浏览器的默认字体大小为16像素）

最后是路线
一旦您考虑了以上所有建议并将其应用到代码中，只需在父级上使用
text align:center
，在子级上重置它，就可以开始了

这里有一个免费的例子

#演示{
文本对齐：居中；
字号：0；
列表样式：无；
保证金：0；
填充：0；
}
#李小样{
文本对齐：左对齐；
字体大小：16px；
显示：内联块；
填充：10px；
}
#演示img{
高度：243px；
宽度：172px；
}
#内部演示{
背景#fec722；
填充：3倍；
}
#shelf {
    display: flex;
    justify-content: center;
}