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

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

vertical-alignment center css-float css

Mathias Bynens · 技术社区 · 15 年前

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

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

有什么解决办法吗?

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

3 回复 | 直到 12 年前

Kornel 15 年前

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

riddle 15 年前

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

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; }

谢谢你的帮助,伙计们!

推荐文章

YunusoviÄ · 我无法用css更改html段落颜色

1 年前

Blake · 无法使用CSS旋转Angular 15中的字体图标

1 年前

Maarten -Monica for president · 将图像放在锚点标记内时调整网格中的图像大小

1 年前

Phil Lucks · 如何制作边界的外半径?

1 年前

roy_meir · 创建自定义下拉式元素

1 年前

Community wiki · 如何为触摸设备优化网站

1 年前

Paras Chandravanshi · 为什么<ul>没有从其父<p>元素继承?

1 年前

tpetzoldt · 如何在有光泽的情况下抑制图像的抗锯齿?

1 年前

boyenec · 反应如何将css样式应用于我从api respose获得的页面的spcifc部分

1 年前

manofconstsorrow · 点击导航项目关闭汉堡菜单

1 年前