垂直对齐底部不在表格单元格中工作

时间:2016-07-05 10:09:26

标签: html css

我有一个div,它是一个bootstrap行。我想垂直对齐div的底部,但它仍然与行div的顶部对齐。

代码:

    <div class="row" style="height:100%;">
      <div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
        <h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
      </div>
    </div>

为什么这段代码不起作用?

2 个答案:

答案 0 :(得分:2)

请参阅代码:

<div class="row">
  <div class="col-xs-12" style="display:table;">
    <h4 style="color:#000; display: table-cell; vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
</div>

答案 1 :(得分:0)

display:table添加到父div.row 还添加了身体和html高度100%;

<div class="row" style="height:100%; display: table;">
      <div class="col-xs-12" style="height:100%;display:table-cell;vertical-align: bottom;">
        <h4 style="color:#FFF;vertical-align: bottom;">*Stuff like restaurants, meat alternatives, dairy alternatives, and much more!</h4>
      </div>
    </div>

https://jsfiddle.net/mjaty6u7/