引導格爲表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的文本。

所以，如果我行高設置爲span它的工作原理，但在文字與它們之間的空隙多的話......每個字現在從新行開始和這條線（每個）具有相同的line-height

例子： https://jsfiddle.net/lymychm/prc2rstd/

這就是我想要的，但divhttps://jsfiddle.net/lymychm/zn48z0ex/

Answer 1

當浮動：左邊是使用那麼就很難使它垂直對齊中間。我們需要將行定義爲表格，將其內部div定義爲表格單元格，並從中移除浮動元素。但不知何故，我們即使用flexbox它的另一個好方法，演示https://jsfiddle.net/anmolsandal/cuv10dqo/1/

更新CSS

.border { 
border: 1px solid red; 
display: flex; 
align-items: center; 
} 

.line-height-class { 
    line-height: 120px; 
} 

代碼

<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> 
</div> 

Answer 2

，你可以在你的CSS添加此代碼，

.col-lg-1 { 
    display: inline-block; 
    vertical-align: middle; 
    float: none; 
} 

更改該類名稱...

Answer 3

.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>

Answer 4

展開您的div像this fiddle.

.border { 
 
    border: 1px solid red; 
 
} 
 

 
.line-height-class { 
 
    line-height: 120px; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<div class="row border"> 
 
    <div class="col-lg-1 col-md-1 col-xs-1 col-sm-1"> 
 
     <span class="align-middle line-height-class">Short</span> 
 
    </div> 
 
    <div class="col-lg-9 col-md-9 col-xs-9 col-sm-9 "> 
 
     <span class="align-middle line-height-class">Long col with long text</span> 
 
    </div> 
 
</div>

Answer 5

使用Flexbox的寬度，見例如：https://jsfiddle.net/prc2rstd/6/

HTML，

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

CSS，

.box { 
    border: 1px solid red; 
    width: auto; 
    padding: 20px; 
    display: inline-block; 
} 

.align-middle { 
    display: flex; 
    align-items: center; 
} 

.column { 
    width: 70px; 
}