浮点div中的对齐元素与常规div之间的差异？

Question

我在float div中的<p>，<a>和<img>元素上使用了“margin：0 auto”，但它似乎并没有影响它们。因此，我通过“margin-left”手动对齐它们。它看起来不错，但我宁愿将统一规则应用于div中的所有元素。谢谢。

浮动div：

#side {  
    float: left;
    width: 300px;
    height: 630px;
    background-color: white;
    border-radius: 10px;
}

Answer 1

容器内的布局不受容器是否为float的影响。这只会影响容器的位置，而不会影响容器内的子元素的位置。

您尝试使用margin的元素是内联元素，而不是块元素 对于margin: 0 auto之类的内容，auto适用于通常为全宽的块元素，而不适用于通常仅与内容一样宽的内联元素。

对于内联元素，您可能希望使用text-align: center，但我们必须确切地查看您的确切HTML和所需的布局才能准确了解要推荐的内容。

Answer 2

如果我理解正确，你试图集中对齐浮动div中的所有元素（p，img和a）。

在您指定的3个html元素中，＆lt; p＆gt; 是块级元素，但＆lt; img＆gt; 和＆lt; a＆gt; < / strong>是内联元素。为了使用margin: 0 auto，所有元素都应指定宽度。并且只能为块级元素指定宽度。

因此，您可以将属性display: block用于内联元素，例如a和img，它们会将它们转换为块级元素。然后，您可以为div中的所有元素指定width属性（包括p, a, and img）。一旦指定了所有元素的宽度，现在您可以使用margin: 0 auto，它应该可以正常工作。

如果您希望div中的文本始终居中对齐，那么您可以在div上使用名为text-align: center的css属性。