垂直居中兩個元素，並左右浮動

Question

我想垂直對齊父div中的兩個div。

垂直對齊很簡單，但我也嘗試浮動div，一個左邊和一個右邊。

這可能嗎？

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

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

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>

1. methods for aligning flex items on main axis
2. the flex order property can move elements around the screen
3. floats are ignored in a flex formatting context

Answer 2

這是不使用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 3

首先讓修復，一些：留在左，右在合適的

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

二：柔性使得元素表現得像塊，丟棄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 
} 

Answer 4

很簡單。你需要把你的左邊的div放在標記中。然後只需將margin: auto添加到正確的div。

注意，如果你需要保留原來的標記（用正確的股利，再左格），Flexbox，就可以讓你使用上的每個格直觀order:財產訂購的div。

我已經更新這裏的小提琴：https://jsfiddle.net/v6facjnp/4/