2014-01-07 189 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

它不起作用,请检查小提琴 –