這篇文章給大家分享的是有關bootstrap讓圖片居中顯示的方法的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

創新互聯建站是一家專業提供波密企業網站建設,專注與網站建設、網站制作、H5開發、小程序制作等業務。10年已為波密眾多企業、政府機構等服務。創新互聯專業網絡公司優惠進行中。

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

一般情況下，我們的圖片都使用了.img-responsive 類來實現圖片響應式。

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

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

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

注：.center-block 類的放置位置。一定要放在<img>標簽中，如果放在外層，則不能實現居中。

例如，下邊的代碼則不能實現圖片居中。

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

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

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

感謝各位的閱讀！關于bootstrap讓圖片居中顯示的方法就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

網站欄目：bootstrap讓圖片居中顯示的方法-創新互聯
文章地址：http://vcdvsql.cn/article10/ccecgo.html

成都網站建設公司_創新互聯，為您提供用戶體驗、企業建站、品牌網站設計、動態網站、面包屑導航、關鍵詞優化

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯