html - Bootstrap div作为表td，中间文本

Question

设置垂直对齐 div 内内容的问题 示例:

<div class="row border">
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1">
  <span class="align-middle">Short</span>
</div>
<div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
  <span class="align-middle">Long col with long text</span>
</div>   

https://jsfiddle.net/lymychm/cuv10dqo/

我想在 div 中垂直显示文本。

因此，如果我将 line-height 设置为 span ，它就可以工作，但是当文本中有许多单词之间有空格时...每个单词现在都从新行开始，并且该行(每个)具有相同的值行高

示例: https://jsfiddle.net/lymychm/prc2rstd/

这就是我想要的，但是在 div https://jsfiddle.net/lymychm/zn48z0ex/

Answer 1

.border {
  border: 1px solid red;
}

.line-height-class {
  line-height: 120px;
}
.abc { display: table;
    width: 100px; /* width of parent */
    height:100px; /* height of parent */
    overflow: hidden; }
.inner {
     display: table-cell;
    vertical-align: middle;
    width: 100%;
    margin: 0 auto;
    text-align: center;
}

<div class="row border">
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 abc">
      <span class="align-middle inner">Short</span>
    </div>
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1 ">
      <span class="align-middle">Long col with long text</span>
    </div>   
</div>