Question

我在相对定位的div中绝对定位图像时遇到了麻烦。图像应该在div中居中。为此，我使用以下css

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

这适用于除Firefox以外的所有浏览器。这有什么解决方法吗？因为我已经为此搜索了很多，我无法解决问题。

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表示25%顶部的div和左侧的50%。

Answer 3

如果您只想在那里拍摄图像，请尝试将其作为背景图像。

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内部并使用margin，padding或其他任何位置。

Answer 4

汽车保证金怎么样：

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

这对我在firefox 7中起作用

Answer 5

测试一下：

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 6

这是一篇关于CSS-Tricks主题的好文章：

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

相对div firefox中的绝对定位

6 个答案: