首页 > web前端 > html/css/css3 > Bootstrap 3 如何设置图片居中对齐
网站建设、切图、企业建站、微信开发 联系QQ:404658186 tel:18716186715
2015
07-02

Bootstrap 3 如何设置图片居中对齐

如果您使用的是Bootstrap 3中,您可能遇到这么一个问题,你可以使用.text-center对文字居中对齐,图片却无法居中对齐,要解决这个问题你可以需要做很多事件,比如在img外加个div,再通过图片宽高大小等做调整等。

码农小兵发现Bootstrap 3中有一个非常简单的方法就能实现图片响应式的水平垂直居中对齐,把图片添加css类img-responsive center-block即可实现,来看看吧。

bootstrap-center-image

在Bootstrap 3要使图片对齐,你可以试试下面的代码:

Bootstrap v3.0.1介绍。使用center-block类,您可以将图对齐到容器的中心。下面是例子:

<img src="图片地址" class="img-responsive center-block" />

推荐使用这种方式,因为它是更方便和简单。

最后编辑:
作者:码农一号
这个作者貌似有点懒,什么都没有留下。
捐 赠如果您觉得这篇文章有用处,请支持作者!鼓励作者写出更好更多的文章!

Bootstrap 3 如何设置图片居中对齐》有 4 条评论

  1. eddie 说:

    真的很好用,感谢博主~

  2. 1111 说:

    我用 img-responsive center block 只显示了水平居中,没有垂直居中

留下一个回复

你的email不会被公开。

*