垂直對齊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

回答

相關問題