首页 / 问答 / [Bootstrap]中如何设置响应式的图片垂直居中显示呢?

[Bootstrap]中如何设置响应式的图片垂直居中显示呢?

0

在使用Bootstrap进行前端响应式布局开发中,在一个div容器中有一张设置了响应式自适应的图片img-responsive,但图片的尺寸比容器的尺寸小,现需要将这张响应式的图片设置为居中对齐,应该如何实现呢?

回复 [×]
提交评论
请输入评论内容

2 个回答

  • 0

    在Bootstrap 3.0.1及以上版本中,提供了.center-block样式类,我们可以使用此样式来实现响应式图片的垂直居中效果,示例代码如下:

    <img src="..." alt="..." class="img-responsive center-block" />
    
    Rector的个人主页

    Rector

    1个月前 回答

    • 0

      当然,除了使用Bootstrap内置提供的.center-block样式类之外,我们还可以重写.img-responsive样式类来自定义以实现垂直居中效果,如:

      .product .img-responsive {
          margin: 0 auto;
      }
      
      Rector的个人主页

      Rector

      1个月前 回答

      我来回答