火狐table-cell 图片垂直居中
图片垂直居中真是伤,又发现一个火狐的问题:
html:
<div class="table-cell"><img src="http://img1.picbed.org/uploads/2014/07/023b5bb5c9ea15ce411a0a58b4003af33b87b2ef.jpg"></div>
css:
.table-cell{
display:table-cell;
width:500px;
height:500px;
background-color:green;
text-align:center;
vertical-align:middle;
}
.table-cell img{
max-width:100%;
max-height:100%;
vertical-align:middle;
}
chrome下面没问题,火狐图片溢出,貌似max-width没有生效。
解决方案是:把table-cell改为table并加上table-layout:fixed,但是这样图片就不垂直居中了!
参考:http://ihatetomatoes.net/firefox-issue-with-foundation-and-vertical-alignment/
谁有更好的解决方案,留言!!!
总结: