Question

两个div都在另一个div中：

＆＃13;

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

＆＃13;

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

＆＃13;

第二个div虽然对齐而不是居中。如何在不使用变换的情况下使其居中？我也需要它，所以它是一行，没有堆叠。

Answer 1

不幸的是，没有简单的方法可以使用浮点数，内联块或甚至是弹性框，这些方法将使中间区域居中。 div虽然它有一个兄弟，占据了父母的流动空间。

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

旁注：您不能同时使用浮动和显示：内联块。它们是相互排斥的。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

<强>解决方案：

您必须使用position:absolute从文档流中删除其中一个元素，然后相应地放置元素。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

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>

如何将div与左边对齐，另一个div与中心对齐？

2 个答案: