如何在Bootstrap 3中實現完美的垂直文字和圖像對齊？

Twitter Bootstrap 3 中的垂直文字和圖像對齊

儘管對此主題的查詢很普遍，但在Twitter Bootstrap 3 中實現文字和圖像的垂直對齊Twitter Bootstrap 3 可能難以捉摸，特別是對於具有不同尺寸的動態內容。

要解決為了應對這一挑戰，我們創建了一個 Bootply 演示來說明所需的佈局，其中文字和圖像垂直居中，無論它們的相對大小如何。

解決方案在於使用 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;
}

透過將margin-right設定為負值，我們確保列並排放置，同時保持它們的垂直對齊.

要測試此方法，請導航至http://bootply.com/94402 上的演示，其中文字和圖像正確垂直居中，以適應不同的內容尺寸。

以上是如何在Bootstrap 3中實現完美的垂直文字和圖像對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！