Bootstrap中图片怎样水平居中显示只需这个类属性!

Bootstrap是目前较为流行的一款自适应CSS其强大的设备兼容性以及自带的各种功能字体图标,使得Bootstrap非常受网站建设前端开发者喜爱,但在使用Bootstrap中仍旧会有一些问题存在,例如Bootstrap中图片怎样水平居中,许多小伙伴看到这个问题时首先会想到的是使用 class="text-center" 这个类,但是然并卵好像并不起什么作用,虽然他可以使得文字居中,其实想要让图片居中并不复杂只需要这个类属性!

center-block类是Bootstrap自带的一个类属性.center-block{display:block;margin-right:auto;margin-left:auto},通过将图片img标签定义为一个块元素,同时定义左边距自动右边距自动从而实现图片水平居中的效果.

Bootstrap中图片怎样水平居中
Bootstrap中图片怎样水平居中

使用方法则为<img src="..." class="img-responsive center-block">这样便可以较为简单的实现图片在Bootstrap中水平居中的问题.

有人会发现为何你的类选择其中选择了 img-responsive 这个类的意思其实是将图片进行自适应处理的一个类!

未经允许不得转载:西德SEO » Bootstrap中图片怎样水平居中显示只需这个类属性!

打赏

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

'); })();