我见过很多像这样的问题,但我似乎无法找到答案:
我有一张MAX文件大小为128 x 128像素的图片 有些是那么大,但我也有128 * 90,60 * 60,58 * 78等。
现在我想在div中垂直对齐它;如果它是一个高度为50px的img,我见过前50%和边距-25px的例子,但我不知道提前的高度......
grtz, 米歇尔
答案 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>