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>