Question

我有两个div，一个在左边，一个在右边。如果左侧的描述长于图像（180px），则图像保持在顶部。或者反之亦然，如果文本比图像短，则文本要在顶部对齐。

我希望两者始终在中间对齐。

我认为我需要的是display:table-cells然后是vertical-align:middle，但到目前为止，我没有运气让它发挥作用。

  <div class="span4">
   <img class="thumbnail" src="http://placehold.it/290x180" width="290" height="180" alt="Second function" />
  </div>
  <div class="span6 offset1">
    <h3>Element</h3>
    <p>Description.</p>
  </div>

Answer 1

开始看这个： Vertically centering a div inside another div

获取了那里提到的一些样式元素并将其应用于此处： http://jsfiddle.net/kgJ2M/3/

一旦我将高度值放在单独的div中，它就会将描述室放在中心位置，而不是居中放在一个刚好适合里面的盒子里面。

希望这个问题不会迟到。这似乎是一个普遍的问题。

.span4 {
  float:left;
}
.span6{
  height:180px;
  width:100px;
  vertical-align:middle;
  display:table-cell;
  border:1px solid blue;
}
.containerspan {
  border:1px solid green;
  height:200px;
  display:table-cell;
  vertical-align:middle;
  text-align:center;
}

垂直对齐右 - 左div

1 个答案: