CSS表格单元格宽度适用于Chrome，但不适用于FF或IE

我发现，使用display:table-cell是使事物垂直居中的一种有用方法——特别是在RWD环境中，静态px维度不起作用。我试图得到一个标志，img和一些文字，以中心垂直彼此不使用浮动

请看这里：

在Chrome中，它按预期工作。当浏览器的大小变小时，img会变小，文本会自动换行。但在FF、IE 9和Opera中，图像不会收缩，事实上，似乎所有宽度和高度声明都被忽略了

我是否可以对我当前的HTML/CSS进行一些更改来解决这个问题，或者Chrome支持我当前的布局是一个令人高兴的错误，而我在这方面完全错了

---

谢谢

我真傻，我刚想出来

---

“最大宽度”仅适用于块级元素，因此img{Max width:100%；}声明不起作用，这会阻止图像具有流体宽度。通过瞄准img并给它一个宽度：100%来解决这个问题；轰

如果父元素中没有相应的

display:table行

和

display:table

，则不能使用

display:table单元格

你没有这个功能，而且你显然没有试图将它用作表格单元格。虽然您可能已经在使用它来集中内容方面取得了一些成功，但这并不是它的设计目的，因此它不能在所有浏览器中工作也就不足为奇了

---

如果您确实想为此使用

表格单元格

，但它没有达到您的目的，那么您可以尝试向父元素添加

表格行

和

表格

样式（为此，您可能需要额外的标记，因为如果将它们放在

包装器

和

标题

上，它们将对现有样式产生影响。）.

我喜欢语义，喜欢按原意使用东西，但似乎没有其他方法可以让元素在不设置高度或负边距的情况下彼此垂直居中。你知道一种方法可以实现垂直对齐，同时避免我上面描述的所有混乱和语义正确吗？我不需要我愤怒地说“不要使用

表格单元格

”（CSS与语义并不相关，所以这不是问题所在）。我的意思是，如果您将它与

表格行

和

表格

结合使用，它可能会工作得更好，因为它就是这样设计的。