居中图像

时间:2012-08-19 19:53:47

标签: html css css3

我的图像宽度为500px。它在div里面。 div的宽度为250px。如何将图像对齐div中心?我应该使用top还是left还是应该使用负边距?

4 个答案:

答案 0 :(得分:3)

我会使用负边距:#myDiv img { margin: 0 -125px; }。这仅在您知道DIVIMG的宽度时才有效。

答案 1 :(得分:0)

你能改变(或至少添加)图像周围的html中的东西吗?这是一个古老的技巧,有点尴尬,因为它需要你在图像周围添加一个额外的<div>,但是如果你对它有好处的话它会很好用(注意,添加一些边框到在测试时可以轻松看到效果):

<div style="width:250px; border: solid 2px red;">
    <!-- Place the following div at 50%: -->
    <div style="width: 500px; margin-left:50%; border: solid 2px blue;">
        <!-- ...then move the image back by half of it's own width: -->
        <img style="width:500px; margin-left:-250px; border: solid 3px green;" />
    </div>
</div>

答案 2 :(得分:0)

Demo

嘿现在习惯display table-cell属性就像这样

<div class="parent">
<img src="http://www.gravatar.com/avatar/3c6597370b476903ed475f70b4b3ce31?s=32&d=identicon&r=PG">
</div>

<强>的CSS

.parent{
border:solid 1px red;
  display:table-cell;
  width:300px;
  height:300px;
  vertical-align:middle;
  text-align:center;
}
.parent img{
vertical-align:top;
}

Demo

答案 3 :(得分:0)

尝试这个(不确定ie-6但在ie-7和plus中工作正常)

<style>
.test{ height:250px; width:250px; overflow:hidden; position:relative;}
.test img{ position:absolute; top:50%; left:50%; margin-left:-250px; margin-top:-250px; height:500px; width:500px;}
</style>

<body>
<div class="test"><img src="img.png" alt="img" /></div>
</body>

如果可以将该图片用作背景,您可以尝试使用此图片

.test{height:250px; width:250px; background:url(img-path.png) no-repeat 50% 50%;}