Question

我很难将我的图像居中，没有固定的宽度，因为我将与其他不同尺寸的图像交换。我不希望它超过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;


}

Answer 1

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

div.side 
{
    margin: 0 auto;
}

Answer 2

通过添加以下内容解决了问题：

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

为了防止在翻转时显示下部div，我补充道：

.back { top: -409px;}

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

如何水平定位动态宽度图像

2 个答案: