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

Question

我正在制作一个使用Bootstrap 3的网站，我需要一行带有3列缩略图的行，其标题位于右侧。 像这样：

所以我的问题是：

• 如何获得正确的字幕？

• 如何将文本垂直居中放置在缩略图上？

• 如果可能，我希望您在图像上看到灰色的包装纸。

Answer 1

如果您不打算支持IE8或更低版本，则可以使用以下规则：

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

这应应用于要在其父对象内部垂直居中的子对象。

资源