如何水平放置我的動態寬度圖像

我有一個困難的時間，我的圖像沒有一個固定的寬度，因爲我將與其他不同大小的人交換。我不希望它超過390像素高，這就是爲什麼我設置了最大高度。我已經嘗試了很多東西，例如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; 


}

來源

2014-09-04 afigure

你的標題說說水平居中，但你提到的'MAX-height'左右....高度垂直 – DaniP 2014-09-04 22:09:43

我只是指明爲什麼我有一個MAX-寬我的代碼中的最大高度。我正在尋找水平居中我的圖像，同時安裝在最大高度的容器中。 – afigure 2014-09-04 22:48:07

既然你在一個DIV包裝的圖像，你應該申請汽車利潤率將它：

div.side 
{ 
    margin: 0 auto; 
}

來源

2014-09-04 22:11:04

的問題是固定的，加入：

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

爲了防止低位div在翻轉時出現，我補充說：

.back { top: -409px;}

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

來源

2014-09-05 01:31:57 afigure

如何水平放置我的動態寬度圖像

回答

相關問題