Question

这就是我的页面：

现在当我添加另一篇文章时：

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

我怎样才能让他们居中？

#demo {
    float: left;
    margin: 0 auto;
    width: 980px;
    list-style: none;
}
#demo li {
    background: #fec722;
    float: left;
    margin: 10px 0 10px 15px;
    width: 178px;
}
#demo img {
    height: 243px;
    margin: 3px;
    width: 172px;
}

<ul id="demo">
    <li><img src="http://goo.gl/0nSAIH"></li>
    <li><img src="http://goo.gl/0nSAIH"></li>
</ul>

（JSFiddle）

Answer 1

你不能在左边漂浮一些东西并同时将它与中心对齐。

我在此建议您避免浮动，而是将display: inline-block;设置为li。除了text-align: center;到ul之外，还有其他功能。

此处的jsfiddle已更新：https://jsfiddle.net/jormaechea/tm91znz2/5/

Answer 2

你真正需要的是两行代码（你可以摆脱所有的浮点数和clearfix div）：

#shelf {
    display: flex;
    justify-content: center;
}

Revised Fiddle

flexbox的好处：

最小代码;效率很高
centering, both vertically and horizontally, is simple and easy
equal height columns are simple and easy
multiple options for aligning flex elements
响应
与花车和桌子不同，浮动和桌面提供有限的布局容量，因为它们从未用于建筑布局，因此flexbox是一种现代（CSS3）技术，具有广泛的选项。

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

请注意，所有主流浏览器except IE 8 & 9都支持flexbox。最近的一些浏览器版本，例如Safari 8和IE10，需要vendor prefixes。要快速添加所需的所有前缀，请在左侧面板中发布CSS：Autoprefixer。 this answer。

Answer 3

首先，关于花车

尽可能远离花车。他们将导致布局出现问题，除非您有使用经验。 90％的情况下，如果页面上有浮动问题，浮动就是问题所在。相反，你应该使用display: inline-block，这是自切片面包以来最好的东西。

浮点数对于将图像放入文本段落，然后允许文本自然地围绕图像流动等内容非常有用。除此之外，您可以找到一种更好的方法来实现您的目标。

接下来，间距

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

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

最后，对齐

一旦您将上述所有建议都考虑在内并将其应用到您的代码中，只需在父级上使用text-align: center，将其重置为子级，然后您就可以了！

这里有一个免费的例子

＆＃13;

#demo {
    text-align: center;
    font-size: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
#demo li {
    text-align: left;
    font-size: 16px;
    display: inline-block;
    padding: 10px;
}
#demo img {
    height: 243px;
    width: 172px;
}
#demo .inner {
    background: #fec722;
    padding: 3px;
}

＆＃13;

<ul id="demo">
    <li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
    <li><div class="inner"><img src="http://goo.gl/0nSAIH"></div></li>
</ul>

＆＃13;

如何集中浮动列表？

4 个答案:

首先，关于花车

接下来，间距

最后，对齐

这里有一个免费的例子

相关