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

在 Twitter Bootstrap 3 中垂直居中內容

許多用戶在 Twitter Bootstrap 3 中垂直居中文本和圖像時遇到了挑戰。本文提供一種利用響應式和動態內容的解決方案。

一個方法是利用display:inline-block 屬性而不是 float。這允許內容垂直對齊，同時保持響應不同螢幕尺寸的能力。透過合併 vertical-align:middle，文字和圖像都將垂直居中。

要實現此解決方案，只需添加以下 CSS：

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

This將使文字和圖像居中，無論它們的相對大小如何。

可在以下位置取得工作演示http://bootply.com/94402，展示內容如何動態回應螢幕解析度變化，同時保持垂直對齊。

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