如何在 Bootstrap 3 中垂直居中內容？

在Twitter Bootstrap 3 中垂直居中內容

在Bootstrap 3 中處理動態內容時，常見的挑戰是將文字和圖像垂直居中，特別是當它們的大小可能不同時。以下是如何實現這種響應式垂直居中佈局：

解決方案：

不要使用傳統的float 屬性，而是選擇display:inline-block 並應用垂直-align:middle到具有以下內容的相關元素CSS:

.col-lg-4, .col-lg-8 {
    float: none;
    display: inline-block;
    vertical-align: middle;
    margin-right: -4px;
}

解釋：

• display:inline-block 允許元素並排放置，同時保持應用高度和寬度的能力。
• vertical-align:middle 將元素的垂直中心與其中間對齊
• 負 margin-right 調整元素之間的間距，以獲得更精細的佈局。

演示：

現場直播演示，訪問：http://bootply.com/94402

該方案保證文字和圖片都是垂直的即使它們的大小動態變化，也能在各自的列中居中，從而提供響應靈敏且具有視覺吸引力的佈局。

以上是如何在 Bootstrap 3 中垂直居中內容？的詳細內容。更多資訊請關注PHP中文網其他相關文章！