在主div中垂直对齐img

时间:2009-08-29 18:08:07

标签: css

我见过很多像这样的问题,但我似乎无法找到答案:

我有一张MAX文件大小为128 x 128像素的图片 有些是那么大,但我也有128 * 90,60 * 60,58 * 78等。

现在我想在div中垂直对齐它;如果它是一个高度为50px的img,我见过前50%和边距-25px的例子,但我不知道提前的高度......

grtz, 米歇尔

4 个答案:

答案 0 :(得分:1)

您可以使用JQuery获取图像的高度,然后设置margin:-height / 2

或..

您可以将图像设置为包含div的背景,例如:

 background:url(image.jpg) no-repeat center center;

答案 1 :(得分:1)

这样的东西?

<!doctype html>
<style>
    div#parent {
    background:blue;
    height:500px;
    }

    div#child {
    position:relative;
    top:50%;
    zoom:1; /* haslayout */
    }

    div#ie-helper {
    position:relative;
    text-align:center;
    top:-25%;
    zoom:1; /* haslayout */
    }
</style>
<div id="parent">
    <div id="child"><div id="ie-helper">
    <img src="http://www.gravatar.com/avatar/6f6f22658c768b1162200786e3407890?s=32&d=identicon&r=PG">
    </div></div>
</div>

答案 2 :(得分:0)

到目前为止,在HTML / CSS中垂直居中的唯一方法是使用表格单元格 - 这是唯一支持所有浏览器中垂直居中的元素。

对于图片,我只是将其设置为DIV的背景图片,因为您可以垂直居中背景图片。

答案 3 :(得分:0)

在旧的ie中不起作用,但保持代码清洁和无表格,并使用表格功能

.foo { 
  height: 300px;
  display: table-cell;
  vertical-align: middle;
}
<div class="foo">hi</div>