码迷,mamicode.com
首页 > 其他好文 > 详细

响应式图像对齐中心引导3

时间:2019-10-08 00:56:48      阅读:129      评论:0      收藏:0      [点我收藏+]

标签:res   图片   高版本   尺寸   splay   ack   spl   http   trap   

使用Bootstrap
3做目录。当在平板电脑上显示时,产品图像看起来很丑,因为它们的尺寸很小(500x500),浏览器的宽度是767像素。我想把图像放在屏幕的中心,但由于某种原因,我不能。谁会帮助解决问题?

技术图片

如果您使用的是Bootstrap
v3.0.1或更高版本,则应该使用此解决方案。它不会覆盖自定义CSS的Bootstrap样式,而是使用Bootstrap功能。_

我的原始答案显示在后面


这是一个令人愉快的简单解决方案。因为Bootstrap中的.img-responsive已经设置了display:block,所以可以使用margin:0 auto来定位图像:

.product .img-responsive {
    margin: 0 auto;
}

。在Bootstrap 3( _v3.0.1_ )中使用 block类,所以使用:

<img src="..." alt="..." class="img-responsive center-block" />

未经作者同意,本文严禁转载,违者必究!

原文:大专栏  响应式图像对齐中心引导3


响应式图像对齐中心引导3

标签:res   图片   高版本   尺寸   splay   ack   spl   http   trap   

原文地址:https://www.cnblogs.com/dajunjun/p/11633179.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!