Bootstrap如何让文中图片居中显示

最新推荐文章于 2021-04-01 02:04:15 发布

原创最新推荐文章于 2021-04-01 02:04:15 发布 · 3.6k 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了如何在响应式设计中使图片水平居中。通过使用.center-block类，可以确保图片在不同屏幕尺寸下保持居中对齐。同时，文章对比了.center-block与.text-center类在实现效果上的差异。

如果需要实现响应式图片水平居中，那么我们要使用 .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来实现图片居中对齐：