Bootstrap div as table td, middle text - html

Question

problem with set vertical align to content inside div
Example:
<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/
I want to vertically show text in div's.
So if i set line-height to span it works, but when text has many words with spaces between them...each word now starts from new line and this line(each) has same line-height
Example:
https://jsfiddle.net/lymychm/prc2rstd/
This is what i want, but on 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>

Answer 2

Use flexbox, See the example: 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;
}

Answer 3

As when float :left is used then it is hard to make it vertically align middle. we need to define row as a table and its inner div as table cell and remove floats from it. But somehow we have another good approach for it i.e using flexbox, demo https://jsfiddle.net/anmolsandal/cuv10dqo/1/
Updated css
.border {
border: 1px solid red;
display: flex;
align-items: center;
}
.line-height-class {
line-height: 120px;
}
code
<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 4

you can add this code in your css,
.col-lg-1 {
display: inline-block;
vertical-align: middle;
float: none;
}
change that class name...

Answer 5

Expand the width of your div like 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>