页次: 1
Bootstrap是目前较为流行的一款自适应CSS其强大的设备兼容性以及自带的各种功能字体图标,使得Bootstrap非常受网站建设前端开发者喜爱,但在使用Bootstrap中仍旧会有一些问题存在,例如Bootstrap中图片怎样水平居中,许多小伙伴看到这个问题时首先会想到的是使用 class="text-center"
这个类,但是然并卵好像并不起什么作用,虽然他可以使得文字居中,其实想要让图片居中并不复杂只需要这个类属性!
center-block
类是Bootstrap自带的一个类属性.center-block{display:block;margin-right:auto;margin-left:auto}
,通过将图片img标签定义为一个块元素,同时定义左边距自动右边距自动从而实现图片水平居中的效果.
使用方法则为<img src="..." class="img-responsive center-block">
这样便可以较为简单的实现图片在Bootstrap中水平居中的问题.
有人会发现为何你的类选择其中选择了 img-responsive
这个类的意思其实是将图片进行自适应处理的一个类!
来源:西德SEO www.seocid.com
离线
页次: 1