如何将一个div对齐到左侧，另一个div对齐到中心？

Question

两个 div 都在另一个 div 内部：

#container {
  width: 100%;
}

#container > .first {
  display:inline-block;
  float:left;
  width:100px;
}

#container > .second {
  display:inline-block;
  float:right;
  margin: 0 auto;
  width:100px;
}

<div id='container'>
  <div class='first'>Left</div>
  <div class='second'>Right</div>
</div>

第二个div不是居中对齐的，而是右对齐。如何在不使用tranforms的情况下让它居中对齐？我还需要让它在一行上，而不是堆叠起来。

- kennysong

---

怎么样做三个div，将内容放在前两个中并弹性布局第三个，这样你只能看到前两个div的内容和一个隐藏的填充整个右侧但无人看到的div？ - TrojanMorse

将两个 div 的对齐方式设置为左对齐。 - Azad

Answer 1

很遗憾，使用浮动、inline-block甚至flexbox都没有简单的方法可以在父元素内有占据流空间的兄弟元素时居中“middle” div。

下面的代码片段中，红线是中心点。正如您所看到的，左侧的div占用了一些空间，因此中间的div没有居中。

附注：不能同时使用float和display:inline-block。它们是互斥的。

#container {
  text-align: center;
  position: relative;
}
#container:after {
  content: '';
  position: absolute;
  left: 50%;
  height: 200%;
  width: 1px;
  background: #f00;
}
#container > .first {
  float: left;
  width: 100px;
  background: #bada55;
}
#container > .second {
  display: inline-block;
  width: 100px;
  background: #c0feee;
}

<div id='container'>
  <div class='first'>Left</div>
  <div class='second'>Center</div>
</div>

解决方案：

您需要使用 position:absolute 将文档流中的一个元素移除，然后相应地定位 该 元素。

#container {
  text-align: center;
  position: relative;
}
#container:after {
  content: '';
  position: absolute;
  left: 50%;
  height: 200%;
  width: 1px;
  background: #f00;
}
#container > .first {
  position: absolute;
  top: 0;
  left: 0;
  width: 100px;
  background: #bada55;
}
#container > .second {
  display: inline-block;
  width: 100px;
  background: #c0feee;
}

<div id='container'>
  <div class='first'>Left</div>
  <div class='second'>Center</div>
</div>

- Paulie_D

Answer 2

<div style="width:100%;">
  <div style="display:inline-block;float:left;width:100px;">Div 1</div>
  <div style="display:block;width: 100px;margin: 0 auto;">
      Div 2
  </div>
</div>

- Yoan

---

这个方法可以使元素堆叠。 - kennysong