bootstrap響應式佈局圖片怎麼居中

Bootstrap框架來製作響應式網站（或稱之為響應式網頁排版）真的很方便，特別是對於圖片，用一個css類.img-responsive就可以實現響應（自動隨屏幕縮放，姑且這樣理解），一行程式碼就實行了，如同使用html標籤一樣，不需要考慮邏輯。

如下：（推薦學習：Bootstrap影片教學）

class=”img-responsive”

響應式圖片如何居中？

圖片居中在網頁製作中是常常會用到的，那響應式圖片要如何居中呢？也很簡單，用一個css類別.center-block就行了。程式碼如下：

class=”img-responsive center-block”

這一行程式碼讓圖片回應且居中。 so easy!

但問題也會來了！

1.那Bootstrap常用的.text-center類別行不行（能不能讓響應式圖片居中）呢？

答案是：通常情況下，.text-center類別用於文字居中，對於非響應式圖片，會起作用，而對於響應式圖片，則不起作用。

2.那.center-block 類別換一個位置，會不會影響響應式圖片的居中呢？

答案是：會的。

為什麼？

不要問那麼多。上面標紅的程式碼就是正確的標準。收藏好本頁響應式圖片居中的核心技巧，網站製作時有需要時，順手一抄完事。

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

以上是bootstrap響應式佈局圖片怎麼居中的詳細內容。更多資訊請關注PHP中文網其他相關文章！