對齊圖像在div的中心垂直和水平

-1

它可能聽起來很愚蠢，但我有一個問題，在對齊圖像內的股利。我曾嘗試使用對齊圖像在div的中心垂直和水平

-webkit-transform: translate(-50%,-50%); 
-moz-transform: translate(-50%,-50%); 
-ms-transform: translate(-50%,-50%); 
-o-transform: translate(-50%,-50%); 
transform: translate(-50%,-50%);

它在Chrome和Opera上運行良好。但它在Firefox和safari中有一點空白。對於IE的代碼似乎並沒有工作。之後，我用這個替換代碼以使其居中。

margin: -50% 0 0 -50%;

但是圖像不是在中心垂直對齊。我的問題是爲什麼以及如何解決這個問題？

任何意見，歡迎，謝謝

來源

2014-04-12 user3526188

定心有時是棘手的使用CSS做它作爲新的標準時，所有網頁使用HTML5語言必須使用CSS只否則將無法成功驗證爲對齊寫HTML5。下面我就舉一個例子： http://jsfiddle.net/zd9z7/

<div class="div1"> 
    <img src="" alt="" class="image1"> 
    </div> 

.image1 { 
    height:100px; 
    width:100px; 
    vertical-align:10%; 
    background-color:black; 
} 

    .div1 { 
    text-align:center; 
    height:200px; 
    width:200px; 
    background-color:red; 
    }

來源

2014-04-12 07:48:19

我會堅持相對你的DIV位置，然後絕對位置的圖像的內部。將圖像的頂部和左側值分別設置爲50％，然後將頂部和左側的邊距分別減去寬度和高度的一半。

下面是一個例子：http://jsfiddle.net/gYLf9/

.holder {width:400px; height:400px; background:red; position:relative;} 
.img { 
    position:absolute; 
    height:100px; 
    width:100px; 
    border:1px solid #000; 
    position:absolute; 
    top:50%; 
    left:50%; 
    margin:-50px 0px 0px -50px 
    }

顯然改變你的寬度和高度以及所述圖像的邊緣以適應圖像大小。

來源

2014-04-12 07:53:15 pconnor88

嗨@pconnor，我實際上使用百分比的寬度和高度，使其流暢。我是否真的需要更改爲像素以便使對齊正確？我的代碼結構與上面所寫的非常相似。保證金上限無法正常工作，因爲不是-50％，我必須將-32.8％設置爲垂直對齊。只有水平是好的.. – user3526188

對齊圖像在div的中心垂直和水平

回答

相關問題