代码之家  ›  专栏  ›  技术社区  ›  Mathias Bynens

如何在浮动父元素(已知大小)内垂直居中任意大小的子元素?

  •  2
  • Mathias Bynens  · 技术社区  · 15 年前

    如何垂直居中子元素 任意大小 里面 漂浮 父元素(已知大小)?

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

    我在这里创建了一个SSCC: http://mathiasbynens.be/demo/center-vertically-inside-float

    Without float 一切正常。但是 as soon as the parent element is floated ,垂直对齐失败。

    有什么解决办法吗?

    编辑: 我应该补充一下,子元素应该是图像。在我的示例页面中,我使用段落,因为我假设我可以应用任何CSS p 需要的元素 img 元素 display: block; 也。(失败)

    3 回复  |  直到 12 年前
        1
  •  3
  •   Kornel    15 年前

    如果是一条线,那就定了 line-height 属于 p 容器高度。

        2
  •  1
  •   riddle    15 年前

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

        3
  •  1
  •   Community CDub    7 年前

    好吧,谢谢 porneL’s answer 我找到了解决问题的方法。

    在我的SSCC中,我使用段落作为儿童元素(Pornel给出了正确的答案),但我真正需要的是 图像 . 结果这需要一点额外的CSS:

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

    谢谢你的帮助,伙计们!