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

Twitter Bootstrap 3 中的垂直居中內容

要在 Bootstrap 3中實作文字和影像的響應式動態垂直對齊，請考慮以下方法:

CSS程式碼：

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

說明：

提供的CSS對原始Bootstrap欄位進行了必要的變更：

• float : none 刪除水平對齊，允許垂直對齊。
• 顯示： inline-block 將列視為內聯元素，可以垂直對齊。
• vertical-align：中間垂直居中列的內容。
• margin-right：-4px 修正較小的間距問題之間

示範：

訪問[http: //bootply.com/94402](http://bootply. com/94402）查看此功能的示範

附加說明：

• 確保容器元素有足夠的高度以便垂直對齊。
• 如果您需要不同的欄位大小，請相應調整 col-lg 類別。
• 如果遇到不同影像大小的問題，請調整 Vertical-align 屬性依需求。

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