css - 如何在浮动父元素（已知大小）内垂直居中任意大小的子元素？

Question

如何在浮动父元素（已知大小）内垂直居中任意大小的子元素？

display: table-cell; vertical-align: middle;当元素浮动时似乎不再起作用。

没有 float，一切都会正常运行。但是一旦父元素浮动，垂直对齐就会失败。

任何想法如何解决这个问题？

编辑：我应该添加子元素应该是图像。在我的示例页面中，我使用了段落，因为我假设我可以将这些p元素所需的任何 CSS 应用于img元素display: block;。（失败。）

score 3 · Accepted Answer

3

如果是单线，则设置line-height为p容器的高度。

于 2009-12-31T13:51:33.443 回答

score 1 · Accepted Answer

浮动禁用表格单元格，因为单元格不能浮动。所以基本上我会推荐标准的东西——使用浮动垫片技术或绝对定位。

score 1 · Accepted Answer

好的，多亏了porneL的回答，我找到了解决问题的方法。

在我的 SSCCE 中，我使用段落作为子元素（并且porneL 给出了正确的答案），但我真正需要的是图像。事实证明这需要一点额外的 CSS：

div { width: 780px; height: 200px; vertical-align: middle; text-align: center; float: left; }
 div img { vertical-align: middle; }

谢谢你们的帮助，伙计们！

3 回答 3