Question

我有两个div（first_div和second_div）包含在我的html页面中的另一个div中。

我想将vertical align middle设置为first_div内容。

我的HTML类似于：

<div class="outer_div">
<div class="first_div">
   Clean and Simple...<br>
    Moderna
</div>
<div class="second_div">
  Ad pro quidam prodesset conceptam. Accommodare vituperatoribus ius cu, eu sea sale partem legimus, vel ea noluisse phaedrum mediocrem. Ad pro quidam prodesset
  conceptam. Accommodare vituperatoribus ius cu, eu sea sale partem legimus, vel ea noluisse phaedrum mediocrem. Et eam quot autem propriae. Nibh detraxit vix id, et unum graeco his, eu quodsi delectus eum. Cu probatus rationibus eum, ne tamquam omittantur neglegentur nam.
</div>

和CSS

.first_div, .second_div
{
  float:left;
  width:48%;
}

怎么做？

Answer 1

在这里演示：

http://codepen.io/anon/pen/KdgOEW

<div class="outer_div">
    <div class="first_div">
        First div
    </div>
    <div class="second_div">
       Second div
    </div>
</div>

.first_div, .second_div{
  display: inline-block;
  vertical-align: middle;
  margin-right: -4px;
  background: #CCC;
  width: 50%;
}

.second_div{
  background: #DDD;
}

Answer 2

＆＃13;

.outer_div {

  border: solid 1px #ccc;

  padding: 20px;

  float: left;

  width: 100%;

}

.first_div {

  height: 45px;

  line-height: 45px;

  background-color: red;

}

.first_div,

.second_div {

  float: left;

  width: 48%;

}

＆＃13;

<div class="outer_div">
  <div class="first_div">
    DIV 1 content
  </div>
  <div class="second_div">
    DIV 2 content
  </div>
</div>

＆＃13;

Answer 3

* {box-sizing:border-box;}
.outer_div {
  border: solid 1px #ccc;
  padding: 20px;
  float: left;
  width: 100%;
  font-size: 0;
}
.first_div {
  background-color: red;
}
.first_div,
.second_div {
  font-size: 14px;
  padding: 10px;
  display: inline-block;
  /* keeps it inline*/
  width: 48%;
  /*remove float; as it creates problem for vertical-align*/
  vertical-align: middle;
}

<div class="outer_div">
  <div class="first_div">
    DIV 1 content
  </div>
  <div class="second_div">
    conceptam. Accommodare vituperatoribus ius cu, eu sea sale partem legimus, vel ea noluisse phaedrum mediocrem. Et eam quot autem propriae. Nibh detraxit vix id, et unum graeco his, eu quodsi delectus eum. Cu probatus rationibus eum, ne tamquam omittantur
    neglegentur nam. conceptam. Accommodare vituperatoribus ius cu, eu sea sale partem legimus, vel ea noluisse phaedrum mediocrem. Et eam quot autem propriae. Nibh detraxit vix id, et unum graeco his, eu quodsi delectus eum. Cu probatus rationibus eum,
    ne tamquam omittantur neglegentur nam.

  </div>
</div>

这样使用display:inline-block您可以获得vertical-align:middle，或者您也可以尝试使用display:table-cell方法，然后您也可以获得相同的高度。

如何设置div的垂直对齐中间包含另一个div

3 个答案: