Question

我正在尝试垂直对齐父div中的两个div。

垂直对齐很简单，但我也尝试浮动div，一个左边和一个右边。

这可能吗？

＆＃13;

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
}
.inner_right {
  background: blue;
  float: right;
}
.inner_left {
  background: yellow;
  float: left;
}

＆＃13;

<div class="outer">
  <div class="inner_right">
    RIGHT MIDDLE
  </div>
  <div class="inner_left">
    LEFT MIDDLE
  </div>
</div>

＆＃13;

https://jsfiddle.net/xh8rbnmh/

Answer 1

body { margin: 0; }

.outer {
    display: flex;
    align-items: center;
    justify-content: space-between; /* 1 */
    background: red;
    height: 300px;
}

.inner_right {
    order: 1;                       /* 2 */
    /* float: right; */             /* 3 */
    background: aqua;
}

.inner_left {
    /* float: left; */              /* 3 */
    background: yellow;
}

<div class="outer">
  <div class="inner_right">RIGHT MIDDLE</div>
  <div class="inner_left">LEFT MIDDLE</div>
</div>

Answer 2

简单。你需要将你的左div放在标记的第一位。然后只需将margin: auto添加到右侧div。

注意如果您需要保留原始标记（首先使用右侧div，然后是左侧div），则flexbox允许您使用直观的order:属性对div进行排序每个div。

我在这里更新了小提琴：https://jsfiddle.net/v6facjnp/4/

Answer 3

这是不使用flexbox的替代解决方案 - 注意到边距必须是元素的高度。

  .outer {
  background: red;
  height: 300px;
  position:relative;
 }
.inner_right {
 background: blue;
 position:absolute;
 right:0px;
 top:50%;
 margin-top: -18px;
 }

.inner_left {
 background: yellow;
 position:absolute;
 top:50%;
 left:0px;
 margin-top: -18px;
}

Answer 4

首先让我们修复，有些：左边是左边，右边是

<div class="outer">
  <div class="inner_left">
   LEFT MIDDLE
  </div>
  <div class="inner_right">
    RIGHT MIDDLE
  </div>
</div>

第二：Flex使元素表现得像块一样，丢弃float属性。所以我们使用边距并证明

.outer {
  background: red;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content:flex-end; //Move all items to the right
}
.inner_right {
  background: blue;
}

.inner_left {
  background: yellow;
  margin-right:auto;//Move this to the left
}

垂直居中两个元素，左右浮动

4 个答案: