相对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/