如何水平居中对齐图像
Ste*_*eve -2 html css css3 flexbox
在这个页面上,有一些员工照片.
在纵向模式的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;
}
但这些都不起作用.
首先,我检查了你的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;
编辑:
如评论中所述,尝试将<link>您自己的CSS 的标记放在<head>您的网站加载的所有其他样式表的末尾.
这将导致您的CSS最后呈现,您的样式将覆盖以前的.然后尝试将您的规则更改为上述说明中提出的规则.这应该可以解决问题.