css - 如何垂直对齐div与float :left?

Question

我有这种结构....

<div class="container-fluid">
  <div class="section_3 row">
    <div class="image_info_carousel_left col-xs-12 col-sm-12 col-md-6 col-lg-6">

      <h1>Stay organized with your personal moving dashboard</h1>
      <div class="author">Get timely reminders and assign tasks to stay on top of your move</div>
    </div>

    <div class="info_image col-xs-12 col-sm-12 col-md-6 col-lg-6">
      <img src="css/img/realtor-fourth.png" />
    </div>
  </div>
</div>

使用这种类型的 css....

.image_info_carousel_left {
    padding: 100px 50px !important;
    color: #fff;
    background-color: #3B4C60;
}

.info_image {
    padding: 0;
}

image_info 类中图像的高度动态变化...因此 image_info_carousel_left 的高度也应该改变 & 和 <h1>和 <div class="author">应该垂直居中...

我尝试过使用 display:table 和 display:table-cell，但它不起作用，因为带有 col-lg- 的类有 float:left...

我该怎么做？

Answer 1

这是垂直对齐任何东西的公式。

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

只需将这些命令放在要垂直对齐的 div 中，或者如果您使用预处理器，则创建一个 mixin

我创建这个例子是为了看它如何处理 float :

http://codepen.io/riogrande/pen/NxGROP