在缩略图和网格中具有Bootstrap的垂直居中图像

Question

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;
}

Answer 1

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.