CSS中的Div对齐

Question

我希望使用CSS / HTML和Bootstrap在图像中基于子div的数量进行对齐。

1. 全宽最多可容纳3个div（即.container）
2. 如果只显示2个div，则它们应居中对齐。

截至目前，所有div都会向左或向右对齐。

用CSS / HTML实现这一目标的简单方法是什么？不确定我应该在Google上搜索哪些关键字 - 因为有很多文章都在讨论居中div。

Answer 1

将div设为inline-block，将包装设为text-align: center：

.wrapper { text-align: center; }
.wrapper div {
  width: 100px;
  height: 100px;
  background: red;
  display: inline-block;
  margin: 20px;
}

<div class ="wrapper">
  <div></div>
  <div></div>
  <div></div>
</div>
<div class="wrapper">
  <div></div>
  <div></div>
</div>

Answer 2

使用那个CSS，把你的div这样（先浮动）：

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P.S。你也可以漂浮，然后向左，然后向中心。重要的是，花车来到＆＃34;主要＆＃34;中心部分

P.P.S。您经常需要最后一个#container这个片段：<div style="clear:both;"></div>，它将垂直扩展#container以包含两个侧面浮动，而不是仅从#center获取其高度，并可能允许两侧突出底部。