垂直对齐 - Firefox

时间:2014-01-07 19:54:13

标签: css vertical-alignment

它适用于除Firefox之外的所有浏览器。图像的大小不固定。我需要将<a>标记内的任何图像垂直居中。

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/

1 个答案:

答案 0 :(得分:0)

尝试提供图片:

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