相對div內的絕對定位firefox

Question

我在絕對定位一個相對定位的div圖像時遇到了問題。圖像應該在div中居中。爲此，我使用下面的CSS

div 
{ 
    position: relative; 
    top: 0px; 
    left: 0px; 
} 
div img 
{ 
    margin-top: -10px; /*img width is 20px*/ 
    position: absolute; 
    top: 50%; 
} 

這對火狐之外的所有瀏覽器的偉大工程。 有沒有解決這個問題的方法？因爲我已經爲此搜尋了很多東西，所以我找不出什麼東西。 PS：不要跟我說使用行高。因爲圖片旁邊還有文字。所以這個選項對我不起作用。

Answer 1

對於圖像你說top: 50%。什麼是50％？它應該是父元素的50％。什麼是父元素設置？如果沒有設置任何內容，問題就在於此。

Answer 2

爲什麼不這樣做

div 
{ 
    position: relative; 
    top: 0; 
    left: 0; 
} 
div img 
{ 
    position: relative; 
    top:25%; 
    left:50%; 
} 

的relative的圖像是指從div和50%的左側頂部25%。

Answer 3

如何自動邊距：

div img 
{ 
    margin-top: -10px; /*img with is 20px*/ 
    display: block; 
    position: relative; 
    margin-left: auto; 
    margin-right: auto; 
} 

這在Firefox的作​​品對我來說7

Answer 4

測試此：

div { 
    position: relative; 
    top: 0px; 
    left: 0px; 
    background: red; 
    width:500px; 
} 
div img { 
    margin-top: -10px; 
    //position: absolute; /*get it out*/ 
    display: block; /*Important*/ 
    margin: auto; /*Important*/ 
    top: 50%; 
} 

Answer 5

嘗試把它作爲背景圖片，如果你只是想形象那裏。

div 
    { 
     background-image: url('image.jpg'); 
     background-position: center; 
     background-repeat: no-repeat; 
     margin: 0px auto; 
     position: relative; 
     width: Xpx; 
     height: Xpx; 
     top: 0px; 
     left: 0px; 
     vertical-align: middle; 
    } 

併爲文本使用一個div裏面，並使用邊緣，填充或其他。

Answer 6

這是從CSS-技巧這個問題的好文章：

http://css-tricks.com/snippets/css/absolute-center-vertical-horizontal-an-image/