多行垂直对齐

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" 给出的。我希望嵌套的 div 垂直对齐。有什么办法吗？

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

Answer 1

如果要使用显示：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;
}

试一试，如果有帮助请告诉我！

Answer 2

您可以制作包装纸 display: table 和子纸 div display: table-cell; vertical-align: middle;。找到下面的 jsfiddle 演示。

HTML

<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 newsDetailswrap">
          <div class="col-md-8" id="newsDetails">
            Hello I am fine and how are you?</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS

.newsDetailswrap{
    background: red;
    height: 100px;
    display:table;
}
#newsDetails{
    display: table-cell;
    vertical-align: middle;
}

http://jsfiddle.net/hhbnywq1/

多行垂直对齐

Vertical Alignment of multiple lines

html

css

vertical-alignment

tablecell