欧迪网络科技-sea资源网 web前端 2025-05-16 09:13:06

Bootstrap如何让图片在div中水平居中

如何居中显示 Bootstrap div 中的图片：最佳选择：使用 Flexbox（添加 d-flex 和 justify-content-center 类）适用于老旧项目：使用 text-align（设置 img 标签为 inline-block;，并添加 text-align: center;）

(图1)

让图片在 Bootstrap 的 div 里稳如泰山：水平居中秘籍

很多同学都遇到过这个问题：图片在 Bootstrap 的 div 里，怎么也居中不了，看着就难受。其实，解决方法没那么复杂，关键在于理解 Bootstrap 的布局机制，以及一些 CSS 的小技巧。这篇文章会带你一步步搞定它，让你彻底摆脱图片居中难题，从此代码之路顺畅无比。读完后，你将掌握多种方法，并能根据实际情况选择最优方案。

先来回顾一下 Bootstrap 的基础知识。Bootstrap 使用 Flexbox 和 Grid 系统来进行布局，这两种方式都能轻松实现水平居中。 Flexbox 更灵活，适用于各种场景，而 Grid 系统更适合复杂的页面布局。

咱们先从最常用的 Flexbox 说起。要让图片在 div 里水平居中，只需要给父级 div 添加 d-flex 和 justify-content-center 这两个类即可。 d-flex 启用 Flexbox 布局，justify-content-center 则将子元素（也就是图片）水平居中对齐。