I want vertically centered images with Bootstrap inside an grid class and in thumbnail class. The thumbnail classes should be same height. And the paragraph should be at the same level below the images. Have tried everything possible and on the Internet search I have not found a suitable solution that works. Examples there are only images with grid or images with thumbnail, but not in combination with grid and thumbnail. Does anyone have a solution to my problem?
<div class="row">
<div class="col-md-3">
<div class="thumbnail">
<div><img src="pics/logo_pic_height_100px.jpg" ></div>
</div>
<p>Some Text</p>
</div><!--
--><div class="col-md-3">
<div class="thumbnail">
<div><img src="pics/logo_pic_height_60px" ></div>
</div>
<p>Some Text</p>
</div><!--
--><div class="col-md-3">
<div class="thumbnail">
<div><img src="pics/logo_pic_height_120px.jpg" ></div>
</div>
<p>Some Text</p>
</div><!--
--><div class="col-md-3">
<div class="thumbnail">
<div><img src="pics/logo_pic_height_80px.jpg" ></div>
</div>
<p>Some Text</p>
</div>
</div>
That doesn't work!
.thumbnail{
display: inline-block;
vertical-align: middle;
}
The parent element containing .thumbnail
must have display:table;
for vertical-align: middle;
to work. Best-practice is to use a <table>
layout and assign vertical-align
to elements you want aligned middle vertically, such as:
table, tbody, thead, th, tr, td, td table {
padding: 0;
margin: 0;
vertical-align: middle;
}
td, th {
display: table-cell;
vertical-align: inherit;
}
td
elements (or .thumbnail
in your case) should be display: table-cell;
inside the display:table;
element.
Note that line-height
value assigned to the parent element also has an effect when using vertical-align: middle;
on it's children.
I would not advise using top: 50%; transform: translateY(-50%);
top: 50%; transform: translateY(-50%);
as suggest above by others, it's simply not best-practice.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.