2014-01-07 228 views
0

它適用於除Firefox以外的所有瀏覽器。圖像的大小不固定。我需要垂直居中<a>標籤內的任何圖像。垂直對齊 - Firefox

HTML

<a href="#" class="tip popup"> 
    <img src="http://3.bp.blogspot.com/-IjgG5GYb7SI/UNyqFqIOHkI/AAAAAAAAEd8/aoWhNyoSYiw/s1600/Toshiba+Lightfield+Module+AJ201212270055.jpg" alt=""> 
</a> 

CSS

.tip img { 
    position: absolute; 
    min-height: 100%; 
    width: 100%; 
    border-radius: 2px; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    margin: auto; 
} 

.tip { 
    position: relative; 
    display: block; 
    height: 200px; 
    width: 100%; 
    border-radius: 5px 5px 0 0; 
    overflow: hidden; 
    margin-top: -14px; 
    margin-left: -14px; 
    padding-right: 28px; 
} 

http://fiddle.jshell.net/Pbe7m/3/

+0

將圖像作爲背景可以嗎?或者圖像是否具有固有的語義價值? – willoller

回答

0

儘量給到圖像:

img{ 
    position:absolute; 
    top:0; 
    bottom:0; 
    left:0; 
    right:0; 
    margin:0; 
} 
+0

它不起作用,請檢查小提琴 –