CSS:格式化多个 DIV 的最佳方式(包装器 vs 类 vs 分别在 id 中指定)

Question

我试图将页面上的多个 div 元素居中。然而，有些不需要居中，所以我已经排除了为此使用 body 元素的可能性。我认为可以通过三种方式做到这一点:

第一种方法是使用容器，但这会为纯布局样式添加一个元素，并且不是很语义化。

<div id="notcentred">
<div id="container">
  <div id="centrediv1"></div>
  <div id="centrediv2"></div>
</div>

第二个是创建一个中心类并将其简单地添加到需要居中的每个元素。

<div id="notcentred">
<div id="centrediv1" class="centre"></div>
<div id="centrediv2"class="centre"></div>

第三种是将中心 CSS 添加到每个 DIV 的 id。

<div id="notcentered">
<div id="centrediv1"></div>
<div id="centrediv2"></div>

我认为数字 2 最好，因为它最容易管理，而且最语义化，但如果有任何我不知道的地方，欢迎提供选项。

提前致谢。

Answer 1

这正是设计使用类的目的。所以，实际上，使用理想化的 CSS 第三个是错误的。前两个绝对没问题。

尽管如此，如果您希望所有 div 都相似，将一些 div 放在包装器 div 中可能会使它们的其他设置更难设置样式。第二个还允许您更轻松地将居中的 div 分散在非居中的 div 中。第二个元素也更少，这将使您的代码更易于阅读!

考虑到这一点，我会推荐第二种。