如何对响应图像进行居中

问题描述

无论在手机上还是在更高分辨率的计算机上观看，我都无法弄清楚如何制作响应式图像，同时又使图像居中.

I can't figure out how I can make a responsive image and at the same time make the image centered regardless if it is viewed on a cellphone or on a computer with a wider resolution.

我正在使用css类.img-responsive，但这始终会使图像向左对齐.我检查了该类设置的字段，但找不到如何组合不同的样式，以使图像具有响应性，同时又居中.

I'm using css class .img-responsive but that always does align the image left. I checked on the fields set by that class but can't find out how to combine the different styles so that the image is responsive and at the same time centered.

这是用row-fluid类指定的div或article中包含的简单图像.

It's a simple image contained within an div or article specified with a row-fluid class.

推荐答案

此 CSS 可以做到:

.img-responsive {
    position: relative;
    left: 50%;
    transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
}

注意:在IE中，它仅适用于9 +

Note: In IE it works only for 9+

这篇关于如何对响应图像进行居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！