html - 如何将一个 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 是右对齐而不是居中。如何在不使用变换的情况下使其居中？我也需要它，所以它在一行中，没有堆叠。

Answer 1

不幸的是，没有使用 float 、内联 block 甚至 flexbox 的简单方法来使“中间”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>