浮動要素をフレックスで整列する中心

Question

矢印の左右の浮動小数点を同時に保存して、両方のDIVのすべての要素を垂直方向にセンタリングする必要があります。 DIVの高さが同じであれば、それも保存する必要があります。 2番目の目標は、テキストを矢印の近くに配置することです（理解のために写真を見てください）。私のコードで何を編集すればよいですか？

.near { 
 
    display: -webkit-flexbox; 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    align-items: stretch; 
 
    -webkit-align-items: stretch; 
 
    -ms-align-items: stretch; 
 
} 
 

 
.previous, 
 
.next { 
 
    width: 50%; 
 
    padding: 30px; 
 
    cursor: pointer; 
 
} 
 

 
.previous { 
 
    border-right: 1px dashed #5C3317; 
 
} 
 

 
.previous i { 
 
    float: left; 
 
    padding-right: .7em; 
 
} 
 

 
.next i { 
 
    float: right; 
 
    padding-left: .7em; 
 
}

<script src="https://use.fontawesome.com/fcfed8b033.js"></script> 
 
<div class="near"> 
 
    <div class="previous"> 
 
    <i class="fa fa-angle-left fa-2x" aria-hidden="true"></i> 
 
    Hello<br> 
 
    Hello<br> 
 
    Hello<br> 
 
    Hello<br> 
 
    Hello<br> 
 
    </div> 
 
    <div class="next"> 
 
    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i> 
 
    Bye-bye 
 
    </div> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 
<b>Expected result:</b> 
 
<br> 
 

 
<img src="http://i.imgur.com/nO3U0Q7.jpg">

Answer 1

Fiddle

これは、あなたが達成するために探しているもののようです。 HTMLを少し並べ替える必要がありました。また、この場合には、フレックスボックスでフロートを使用する必要はありません。

.near { 
 
    display: flex; 
 
    align-items: stretch; 
 
} 
 
.previous, 
 
.next { 
 
    width: 50%; 
 
    padding: 30px; 
 
    cursor: pointer; 
 
    align-items: center; 
 
    display: flex; 
 
    text-align: center; 
 
} 
 
.previous { 
 
    border-right: 1px dashed #5C3317; 
 
} 
 
.previous i { 
 
    padding-right: .7em; 
 
    align-self: center; 
 
} 
 
.next i { 
 
    padding-left: .7em; 
 
    align-self: center; 
 
} 
 
.text { 
 
    width: 100%; 
 
}

<script src="https://use.fontawesome.com/fcfed8b033.js"></script> 
 
<div class="near"> 
 
    <div class="previous"> 
 
    <i class="fa fa-angle-left fa-2x" aria-hidden="true"></i> 
 
    <div class="text"> 
 
     Hello 
 
     <br>Hello 
 
     <br>Hello 
 
     <br>Hello 
 
     <br>Hello 
 
     <br> 
 
    </div> 
 
    </div> 
 
    <div class="next"> 
 
    <div class="text"> 
 
     Bye-bye 
 
    </div> 
 
    <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i> 
 
    </div> 
 
</div> 
 

 
<br> 
 
<br> 
 
<br> 
 
<b>Expected result:</b> 
 
<br> 
 

 
<img src="http://i.imgur.com/nO3U0Q7.jpg">

Answer 2

<script src="https://use.fontawesome.com/fcfed8b033.js"></script> 
<div class="near"> 
    <div class="slide"> 
    <div class="text prevText"> 
     <p>Left Text</p> 
     <p>Left Text</p> 
     <p>Left Text</p> 
     <p>Left Text</p> 
     <p>Left Text</p> 
    </div> 
    <div class="text nextText"> 
     <p>Right Text</p> 
    </div> 
    </div> 

    <a class="prev"><i class="fa fa-angle-left fa-2x" aria-hidden="true"></i></a> 
    <a class="next"><i class="fa fa-angle-right fa-2x" aria-hidden="true"></i></a> 
</div> 
.near { 
     position: relative; 
} 

.slide { 
    display: flex; 
    align-items: center; 
} 
.text { 
    flex: 1 auto; 
    text-align: center; 
} 
.prevText { 
    border-right: 1px dashed #5C3317; 
} 
.prev, .next { 
    cursor: pointer; 
    position: absolute; 
    top: 50%; 
    width: auto; 
    margin-top: -22px; 
    padding: 16px; 
    z-index: 5; 
} 
.next { 
    right: 0; 
}