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的高度也应该改变＆amp;并且<h1>和<div class="author">应该垂直居中...

我尝试过使用display：table＆amp; 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

我创建了这个示例，看它是否与浮点数一起使用：

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

Answer 2

您可以使用display:inline-block;和vertical-align:middle;而不要忘记display:inline-block;发生的remove extra spaces。

Jsfiddle

＆＃13;

* {
  box-sizing: border-box;
}
.container {
  width: 100%;
  background: red;
  padding: 10px;
}
.box {
  display: inline-block;
  vertical-align: middle;
  width: 50%;
}
.box1 {
  background: blue;
}
.box2 {
  background: blue;
}
img {
  width: 100%;
  display: block;
}

＆＃13;

<div class="container">
  <div class="box1 box">
    <img src="http://placehold.it/350x150">
  </div><!--
  --><div class="box2 box">heading with the fixed height</div>
</div>

＆＃13;

如何垂直对齐div与float：left？

2 个答案: