如何獲得帶字幕的縮略圖，其縮略圖與引導程序3的中心垂直對齊

Question

我正在制作一個使用Bootstrap 3的網站，我需要一行帶有3列縮略圖的行，其標題位於右側。 像這樣：

所以我的問題是：

• 如何獲得正確的字幕？

• 如何將文本垂直居中放置在縮略圖上？

• 如果可能，我希望您在圖像上看到灰色的包裝紙。

Answer 1

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

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

這應應用於要在其父對象內部垂直居中的子對象。

資源