如何将一个div对齐到左边，另一个div对齐到中心?

Both divs are inside another div :

两个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>

The second div is aligned right not center though. How do I get it centered without using tranforms? I also need it so it is in one line, no stacking.

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

2 个解决方案

#1

Unfortunately there is no simple method using floats, inline-block or even flexbox which will center the 'middle' div whilst it has a sibling that takes up flow space inside the parent.

不幸的是，没有一种简单的方法可以使用浮点数、内联块甚至是flexbox，当它有一个分支占据父类内部的流空间时，它就会将“中间”div居中。

In the snippet below the red line is the center point. As you can see the left div is taking up some space and so the middle div is not centered.

在下面的代码片段中，红线是中心点。你可以看到左div占用了一些空间，所以中间的div没有居中。

Sidenote: You can't use float and display:inline block at the same time. They are mutually exclusive.

Sidenote:不能同时使用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>

Solution:

解决方案:

You would have to remove one of the elements from the document flow using position:absolute and then position that element accordingly.

您将不得不使用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>

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

#1