需要将div放在父级中心,同时保持所有div的流畅性

时间:2017-06-27 19:35:13

标签: css twitter-bootstrap-3 fluid-layout

我有一个问题是将div文本放在一个div中,同时保持一切流畅。文本div旁边有照片,根据浏览器大小更改容器高度。当部分缩小时,我需要文本在其容器中保持居中。任何建议都会很棒! Here is my fiddle

我需要帮助的部分设置如下,信息中的文本需要垂直居中。

<section class="section">
    <div class="row">
      <div class="col-md-7 info-outer">
        <div class="info">
          <h3>Lorem ipsum dolor sit amet</h3>
          <p>Fusce tristique sem sem, nec hendrerit tellus tincidunt mollis. Sed dui risus, fringilla eu congue vitae, tempus sed erat. Cras et molestie ligula. Fusce molestie eros ac enim imperdiet, sit amet gravida mauris fermentum. Sed rutrum eros
            sed elit ultricies, consectetur tincidunt lorem aliquet. </p>
        </div>
      </div>
      <div class="col-md-5 photo">
        <img src="css/images/3.jpg" />
      </div>
    </div>
    <!-- /.row -->
  </section>
  <!-- /.section -->

1 个答案:

答案 0 :(得分:2)

如果将其添加到.floor-plan-info,它将垂直对齐内容。 (离开你的JS小提琴)

position: relative; top: 50%; transform: translateY(-50%);

此方法对于垂直对齐内容通常非常可靠。