如何获得带字幕的缩略图，其缩略图与引导程序3的中心垂直对齐

Question

I'm making a website that uses Bootstrap 3 and I need a row with 3 columns of thumbnails with their captions to the right. Like this:

So my questions are:

• How do I get the captions to the right?

• How do I vertically center the text to the thumbnail?

• If possible I'd like to have the gray wrapper you see on the image.

Answer 1

If you don't plan to support IE8 or less you can use the following rule:

.vertical-center {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

This should be applied to the child you want to vertical center inside its parent.

source