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

1.57K 次浏览

0

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

我来回答收藏(0) 评论编辑

2021-01-19 提问

回复 [×]

提交评论

请输入评论内容

2 个回答

0
在Bootstrap 3.0.1及以上版本中，提供了.center-block样式类，我们可以使用此样式来实现响应式图片的垂直居中效果，示例代码如下：
```
<img src="..." alt="..." class="img-responsive center-block" />
```
评论分享

Rector

2021-01-18 回答
0
当然，除了使用Bootstrap内置提供的.center-block样式类之外，我们还可以重写.img-responsive样式类来自定义以实现垂直居中效果，如：
```
.product .img-responsive {
    margin: 0 auto;
}
```
评论分享

Rector

2021-01-18 回答

我来回答

提交答案