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;
}

所以基本上我有从line =“news”的外部div给出的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;
}

尝试一下，让我知道它是否有帮助！

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/

垂直对齐多条线

2 个答案: