使用display：table-cell，我发现，这是一种让事物垂直居中的有用方法 - 尤其是在静态px维度不起作用的RWD环境中。我正在尝试使用徽标img和一些文本垂直居中，而不使用浮动。
见这里： http://dabblet.com/gist/5249192。
在Chrome中，它按预期工作。当浏览器的大小变小时，img变小，文本包装和填充。但是在FF，IE 9和Opera中，图像不会缩小，实际上似乎忽略了所有的宽度和高度声明。
我可以对我当前的HTML / CSS进行一些更改以解决这个问题，或者Chrome是否支持我当前的布局是一个快乐的错误，而且我这样做是错的？
谢谢！
答案 0 :(得分：0)
傻傻的我，我只是想通了。
最大宽度仅适用于块级元素，因此img {max-width：100％;}声明不起作用，这会阻止图像具有流体宽度。通过定位img并给它一个宽度来清除这个问题：100％;吊杆！
答案 1 :(得分：0)
display:table-cell并非真正意图在父元素中没有相应的display:table-row和display:table时使用。
你没有那个，而你显然没有尝试将它用作表格单元格。虽然使用它来集中内容可能取得了一些成功，但这并不是它的设计目标，因此它并不是一个令人惊讶的，因为它并不适用于所有浏览器。
如果您真的想使用table-cell并且它没有达到您想要的效果，也许您可以尝试向父元素添加table-row和table样式（您可能需要额外的标记，因为如果将它们放在wrapper和header上，它们会对现有样式产生影响。