bootstrap如何讓圖片居中顯示

我們在用bootstrap排版內容的時候，有的時候在內容中需要圖片等級居中顯示。

一般情況下，我們的圖片都使用了.img-responsive 類別來實現圖片響應式。 （推薦學習：Bootstrap影片教學）

如果需要實現響應式圖片水平居中，那麼我們要使用 .center-block 類，不要用.text- center

透過.center-block 類別實作響應式圖片水平居中使用方法：

<p><img class="img-responsive center-block" src="..." /></p>

註：.center-block 類別的放置位置。一定要放在標籤中，如果放在外層，則不能實現居中。

例如，下邊的程式碼則無法實作圖片居中。

<div class="center-block"><img class="img-responsive" src="..." /></div>

如果圖片沒有加入響應式類別.img-responsive，那麼我們也可以使用.text-center來實作圖片居中對齊：

<p class="text-center"><img src="..."></p>

更多Bootstrap相關技術文章，請造訪Bootstrap教學欄位進行學習！

以上是bootstrap如何讓圖片居中顯示的詳細內容。更多資訊請關注PHP中文網其他相關文章！