垂直对齐IMG

我见过很多这样的问题，但我似乎无法找到答案：垂直对齐IMG

我有128 MAX文件大小的图片由128像素有些这个大小，但我也有128 * 90,60 * 60,58 * 78等

现在我想垂直对齐一个div内;香港专业教育学院与顶级的50％和利润-25px看到的例子，如果它与50像素的高度IMG，但我不知道提前heigth ...

grtz，米歇尔

来源

2009-08-29 Michel

你可以使用jQuery来获取图像的高度，然后设置边距：-height/2

或..

您可以将图像作为包含div的背景下，这样的：

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

来源

2009-08-29 18:14:25 Aziz

我加载图像动态地，如果我以后检查的宽度，它给我0（零） – Michel 2009-08-29 18:45:47

也许第二种方法（背景图像）会工作？ – Aziz 2009-08-29 18:51:59

使用“背景”，而不是“背景图像” – Aziz 2009-08-29 19:48:22

是这样的吗？

<!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>

来源

2009-08-29 18:29:11

这也做了窍门，谢谢 – Michel 2009-08-30 13:05:43

到中心垂直于HTML的时候，唯一的方法/ CSS迄今使用表格单元格 - 这是一个支持所有浏览器的垂直居中的唯一元素。

对于图片，我只是简单地将它设置为DIV的背景图片，因为您可以垂直居中背景图片。

来源

2009-08-29 18:32:17

你可以依靠定位和百分比，这是最一致的方法。 – 2009-08-29 18:35:12

不老IE的工作，但让你的代码干净，无表和使用表功能与

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

来源

2012-04-02 23:11:23 benstraw

垂直对齐IMG

回答

相关问题