html - 多行垂直对齐

Question

我知道以前有人问过这个问题。但是，我似乎没有发现我的错误。

我设置了一个 plnkr。我尝试垂直对齐一些文本，而需要对齐的内容嵌套在多个 div 中。

<div class="news col-md-12"  id="detailsView" >
  <div class="col-md-8 ">
    <div class="row">
      <div class="col-md-5 widthInDetails">
        <div class="row">
          <div class="col-md-8" id="newsDetails">
            Hello I am fine and how are your (I am good too)
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

在我的 CSS 中我有这个。

.news{
  background-color:black;
  line-height:200px;
  width:200px;
  height:200px;
  display:table;
}
#newsDetails{
  display:table-cell;
  vertical-align:middle;
}

所以基本上我从外部 div 中使用 class="news"给出了 lineheight。我希望嵌套的 div 垂直对齐。有什么办法吗？

http://plnkr.co/edit/cMaCrG1Y8Ky48HwtgNPk?p=preview

Answer 1

如果要使用display:table属性，应该在父节点中设置，如:

<div class="news col-md-12"  id="detailsView" >
  <div class="col-md-8 ">
    <div class="row">
      <div class="col-md-5 widthInDetails">
        <div id="newsParent" class="row">
          <div class="col-md-8" id="newsDetails">
            Hello I am fine and how are your (I am good too)
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

.news{
  background-color:black;
  width:200px;
  height:200px;
}

#newsParent {
  display:table;    
}

#newsDetails{
  height: 200px;
  display:table-cell;
  vertical-align:middle;
}

试试吧，如果有帮助请告诉我!