如何将图像水平居中对齐答案

【问题标题】：how to align images horizontally centered如何将图像水平居中对齐
【发布时间】：2017-05-16 03:29:40
【问题描述】：

在this page，有一些员工照片。

在 iPad 纵向模式下，员工照片在右侧被截断。

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

请注意，我希望图像尺寸相同，只是对齐向左移动以居中，以便面部显示在图像边界的中间。

我尝试了this question的以下解决方案：

.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;
}

但这些都不起作用。

【问题讨论】：

寻求帮助的问题（“为什么此代码不起作用或如何使该代码起作用？”）必须包括所需的行为、特定问题或错误以及在问题本身中重现它所需的最短代码。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。

标签： html css flexbox

【解决方案1】：

首先，我检查了你的 CSS，发现它一团糟！ 你当然应该把它改掉一点。所有这些!important 声明都是非常错误的做法。

但是，我稍微调整了您的 img 样式，并找到了适合您需求的解决方案。

诀窍是覆盖应用于图像的所有其他width 和height 样式，并简单地将其替换为仅根据容器高度设置图像大小的样式。此解决方案可防止您的图像失真。

我还重置了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);
}

结果：

编辑：

结果@宽度：900px

还是不错的，图片居中，没有失真。但是，您可以在此断点处使您的 div 更宽，以获得更优雅的整体结果。

请看下面的例子：将列 (.col-sm-3) 设置为 50% 宽度，将 img 设置为 heigth: 120%; max-heigth: none;

编辑：

正如评论中所说，在您的网站加载完所有其他样式表之后，尝试将您自己的 css 的 <link> 标记放在您的 <head> 的末尾。

这将导致您的 css 最后呈现，并且您的样式会覆盖以前的样式。然后尝试将您的规则改回上述解释中建议的规则。这应该可以解决问题。

【讨论】：

谢谢皮埃尔。当视口为 900px 宽时，该解决方案似乎不起作用，这是危急情况。你能看看你的视口宽度为 900px 的解决方案吗？
谢谢。我有你的代码@rossnorthhomes.com.au/wp-content/themes/houzez-child/style.css 的第 178 行，但我有see this。浏览器是 Windows 10 上的 Chrome。
好吧，我的错。我编辑的 css 文件是“ultimate.min.css”，它是您正在使用的插件的 css。问题是，这个文件是在你的文件之后加载的，它的“！important”语句让这变得一团糟。您应该首先尝试最后加载您的 css，然后应用我们之前使用的相同类型的调整来实现 disered 的结果。

【解决方案2】：

你可以使用的图片：

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

或者你可以使用 Bootstrap

然后分配类“img-responsive center-block”

【讨论】：

谢谢奥列格。图像现在显示为垂直拉伸。
（在 iPad 纵向模式下this page）
如果现在垂直高度被拉伸，我无法将您的答案标记为解决问题。
移除宽度：100%
width: 100%; 未被应用。 width: auto; 是。

【解决方案3】：

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

【讨论】：

【解决方案4】：

对不起，我理解错了。所以基本上你想把你的超大图像放在小 div 中。所以你的父 div (Image Parent) 是相对定位的。首先，您不需要为图像类编写的大量 CSS。从 'ult-ib-effect-style13.ult-ib2-min-height img' 类中删除所有这些。现在您的代码将看起来像

.ult-ib-effect-style13.ult-ib2-min-height img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    height: 100%;
}

即使您不打算从图像类中删除 css，这也适用于所有屏幕宽度！ this question 的可能重复项。您还可以在 absolute 父级的情况下相对定位您的图像。不要忘记使用 transform、moz-transform 来实现链接中提到的跨浏览器兼容性。

【讨论】：

为了保持纵横比，您还必须添加此行
最大宽度：无；
@Steve 你检查了吗？
非常感谢@breakit，修复了它。我最终设置了top: 85%;。

【解决方案5】：

如果您只关心 ipad 纵向模式和 chrome、safari 或 firefox 等浏览器，请使用对象位置。

object-position: center center;
object-fit:cover;

如果您需要 IE 或 Edge 的支持，那么它不会在其中工作。

您可以提及任何您想要的位置，'center center' 是从左侧 50% 和顶部 50%。

请稍微清理一下您的代码，有很多重要的覆盖。

【讨论】：

【解决方案6】：

只需添加以下 CSS

@media (max-width:1024px) {
.ult-ib-effect-style13.ult-ib2-min-height img {
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
}
.ult-new-ib {
    max-height: 330px;
}
}

【讨论】：

谢谢。当我将你的 CSS 添加到 rossnorthhomes.com.au/wp-content/themes/houzez-child/style.css 时，我 see this。我的浏览器是 Windows 10 上的 Chrome。

【解决方案7】：

你有这个用于图像的 css 代码

.ult-ib-effect-style13.ult-ib2-min-height img {
    width: auto!important;
    max-width: none!important;
    height: 100%;
}

也添加这三行

position: relative;
left: 50%;
transform: translate(-50%, 0);

你赢了））

【讨论】：

【解决方案8】：

只需添加以下css：

.ult-ib-effect-style13.ult-ib2-min-height img {
    left: 50%;
    transform: translateX(-50%);
}

【讨论】：