ghostcode
7/22/2014 - 10:07 AM

火狐table-cell 图片垂直居中

火狐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;
}

预览:http://jsbin.com/wutex/2

chrome下面没问题,火狐图片溢出,貌似max-width没有生效。

解决方案是:把table-cell改为table并加上table-layout:fixed,但是这样图片就不垂直居中了!

参考:http://ihatetomatoes.net/firefox-issue-with-foundation-and-vertical-alignment/

谁有更好的解决方案,留言!!!

总结:

  • 当图片的宽度大于table-cell的宽度时,火狐、ie8-9下图片会撑开table-cell;
  • 当图片的高度大于table-cell的高度时,火狐、ie8-9下图片不会撑开table-cell;