我发现使用 display:table-cell 是一种使事物垂直居中的有用方法——尤其是在静态 px 尺寸不起作用的 RWD 上下文中。我正在尝试在不使用浮动的情况下让徽标 img 和一些文本彼此垂直居中。
见这里： http ://dabblet.com/gist/5249192 。
在 Chrome 中，它按预期工作。当浏览器变小时，img 变小并且文本换行等等。但在 FF、IE 9 和 Opera 中，图像不会缩小，实际上似乎所有的宽度和高度声明都被忽略了。
我可以对当前的 HTML/CSS 进行一些更改来解决这个问题，还是 Chrome 支持我当前的布局是一个令人高兴的错误，而我正在解决这一切？
谢谢！
我傻了，我刚刚想通了。
最大宽度仅适用于块级元素，因此 img {max-width:100%;} 声明不起作用，这会阻止图像具有可变宽度。通过定位 img 并为其设置 width:100% 来清除该问题；繁荣！
display:table-cell并不是真的打算在没有相应的display:table-row和display:table父元素的情况下使用。
你没有那个，而且你显然没有试图将它用作表格单元格。尽管您可能在使用它来居中内容方面取得了一些成功，但这并不是它的设计目的，因此它并不适用于所有浏览器也就不足为奇了。
如果您真的想使用table-cell它并且它没有做您想要的，也许您可以尝试向父元素添加添加table-row和table样式（您可能需要额外的标记，因为它们会对现有样式产生影响如果你把它们放在wrapper和header）。