代码之家 › 专栏 › 技术社区 › 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; }

谢谢你的帮助,伙计们!

推荐文章

H. Saleh · 浮动:左:溢出时项目消失

7 年前

Christine · 菜单项向左和向下浮动

7 年前

MyDaftQuestions · 如何强制HTML元素左对齐而不换行

7 年前

JBH · 如何防止对象缠绕浮动图像?

7 年前

Joe Harvey · Div隐藏在Chrome中

7 年前

Rusletov · 使元素与浮动元素的边界相邻

7 年前

Lion King · 使用“float”时会出现不需要的空格

7 年前

Ashley · CSS浮动设置为右,但左浮动[重复]

8 年前

JDS · 如何使两个图像按钮超链接并排占据全屏?

8 年前

Russel Riehle · 如何基于父项的右边缘打开超出的子菜单区域?

8 年前