火狐table-cell 图片垂直居中

火狐table-cell 图片垂直居中.md

图片垂直居中真是伤，又发现一个火狐的问题：

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;