Question

我需要垂直居中两个DIV中的所有元素，同时保存左右箭头的浮动。 DIV的高度相同，也应该保存。第二个目标是在箭头附近对齐文本（查看图片以便理解）。我应该在代码中编辑什么？

.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需要稍微重新排列。此外，在这种情况下，不需要使用带有flex-box的浮点数：

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

中心将浮动元素与flex对齐

2 个答案: