KOKOC KOKOC - 3 months ago 16
CSS Question

Center aligning floated elements with flex

I need to center vertically all elements in both DIVs with saving left and right float of arrows at the same time. DIVs have equal height, it should be saved too. The second goal is to align text near arrows (look at the pic for understanding). What should I edit in my code?

Here are how it looks now and expected result: https://jsfiddle.net/rzxrxcaw/



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


Expected result:


Answer

Fiddle

This seems to be what you're looking to achieve. The HTML needed to be rearranged slightly. Also, there's no need to use float with flex-box in this case:

.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">