如何水平定位我的动态宽度图像答案

【问题标题】：How to horizontally position my dynamic width image如何水平定位我的动态宽度图像
【发布时间】：2014-09-05 09:31:57
【问题描述】：

我很难将没有固定宽度的图像居中，因为我将把它换成不同尺寸的其他图像。我不希望它超过 390px 高，这就是为什么我将它设置为最大高度。我尝试了很多东西，例如 margin: 0 auto;文本将其与内联显示居中对齐，并使 div 成为本网站上针对类似问题提出的建议的表格。任何人都可以帮忙吗？谢谢。

小提琴链接：http://jsfiddle.net/vcrensuq/

html:

<div class="wrapper"> 

<div class="block" id="flip-block">
<div class="front side">
<img src="http://imgur.com/etY8veW.jpg">
 </div>
<div class="back side">
<img src="http://imgur.com/DiSXWpR.jpg">
</div>
</div>

css:

.block {
position: relative;
height: 410px;
width: 582px;
text-align: center;
}

.block img { max-width: 580px;
max-height: 390px;
display: inline-block;


}

【问题讨论】：

你的标题是水平居中，但你提到max-height 所以....高度是垂直的
我只是在说明为什么我的代码中有最大宽度和最大高度。我希望将图像水平居中，同时适合最大高度的容器。

标签： html css

【解决方案1】：

由于您将图像包装在 DIV 中，您应该对其应用自动边距：

div.side 
{
    margin: 0 auto;
}

【讨论】：

【解决方案2】：

问题已通过添加解决：

.block { margin: 0 auto; }
.side { position: relative;
       display: inline block; }

为了防止翻转时显示较低的div，我添加了：

.back { top: -409px;}

我更新的小提琴：http://jsfiddle.net/vcrensuq/3/

【讨论】：