jquery - 水平/垂直跨浏览器居中图像

Question

我遇到了一个 CSS 问题，需要帮助。我在目录中有许多不同大小的图像，我正在动态列出它们以显示以下 View :(我仅显示两个图像作为示例)

这是我的 HTML:

<div class="image">
    <div class="image_container">
        <div class="image_overlay">
            <img src="http://i60.tinypic.com/n2ig5j.jpg" alt="">
        </div>
    </div>
    <div class="footer">
        <div>SOME TITLE</div>
    </div>
</div>
<div class="image">
    <div class="image_container">
        <div class="image_overlay">
            <img src="http://i59.tinypic.com/wri2s9.jpg" alt="">
        </div>
    </div>
    <div class="footer">
        <div>SOME TITLE</div>
    </div>
</div>

和 CSS

.image {
    width: 245px;
    height: 235px;
    margin: 15px;
    float: left;
    border: 1px solid #ccc;
    box-shadow: 0 0 15px #ccc;
}

.image .image_container {
    text-align: center;
    display: table;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

.image .image_container .image_overlay {
    display: table-cell;
    text-align: center;
    height:180px;
    vertical-align: middle;

}

.image .image_container .image_overlay img {
    max-width: 80%;
    max-height: 100%;
}

.footer{
    text-align:center;
}

它在 Chrome 上运行良好，但是当我在 Firefox 上运行它时，它就搞砸了。谁能告诉我我的代码有什么问题，或者我需要如何重写它才能修复它？

FIDDLE

Answer 1

像这样添加table-layout: fixed

.image .image_container {
    text-align: center;
    table-layout: fixed;
    display: table;
    width: 100%;
    padding: 10px;
    box-sizing: border-box;
}

参见 fiddle http://jsfiddle.net/urhxxqpm/3/

还可以阅读:http://www.carsonshold.com/2014/07/css-display-table-cell-child-width-bug-in-firefox-and-ie/