如何将图像水平居中对齐

Question

在这个页面上，有一些员工的照片。

在肖像模式的iPad上，员工照片在右手边被切断。

我不介意他们被切断，但我希望他们对齐中心，而不是左对齐。

注意，我希望图像的尺寸是相同的，只是对齐向左移动，变成中心，这样脸就显示在图像边界的中间。

我尝试了以下解决这个问题的方法：

.ult-ib-effect-style13.ult-ib2-min-height img {
    display:block;
    margin:auto;
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    text-align: center; 
}

和

.ult-ib-effect-style13.ult-ib2-min-height {
    display: flex;
    justify-content: center;
}

但这些都不起作用。

Answer 1

我知道有些解决方案可能有效，但你的问题还有很多。插入内联高度或宽度是错误的做法。另外，在使用图像之前，您必须知道图像的确切大小。使用图像支架有助于做到这一点。使用“高度”属性使图像变小。如果您的图像不适合容器，那么您总是会遇到问题，这就是为什么您必须始终知道要使用的图像的确切高度和宽度。它也有助于提高性能。在较小的屏幕上，图像会出现更多问题。因为图片的大小，右边是黑色的。有了响应性设计，你希望你的图像比矩形更方，即使它不是完美的。css一团糟，您使用的是无用的属性、样式属性和值。只需调整图片的大小，使其具有与容器（col-sm-3）相似的宽度和高度，然后使用引导“img responsive”类即可。

Answer 2

对于图像，您可以使用：

img {
    display: block;
    margin: auto;
    width: 100%;
}

Answer 3

首先，我检查了你的css，结果是一团糟！你应该把它修改一下。所有这些！重要的语句是非常错误的做法。

然而，我稍微调整了一下你的img样式，找到了一个适合你需求的解决方案。

技巧是重写所有其他应用于图像的宽度和高度样式，并简单地将其替换为仅根据容器高度设置图像大小的样式。此解决方案可防止图像失真。

我还重置了translate3d样式，以便图像在容器中居中。

.ult-ib-effect-style13.ult-ib2-min-height img {
    min-width: auto!important;
    width: auto!important;
    max-width: none!important;
    height: 100%!important;
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
}

它仍然很好，图像居中，没有失真。然而，您可以在这个断点上使div更宽，以获得更优雅的整体结果。

请参见下面的示例：将列（.col-sm-3）设置为50%宽度，将img设置为高度：120%；最大高度：无

正如在评论中所说，试着把

这将导致css最后呈现，而样式将覆盖以前的样式。然后试着把你的规则改回上面解释中提出的规则。这应该能奏效。