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

谢谢你的帮助,伙计们!

推荐文章

HappyMe · HTML/CSS-如何在三个div中居中,独立于周围的div

6 年前

Sam · 使用Bootstrap 4将图像居中放置在另一个图像的顶部

6 年前

azro · 将不同大小的图像居中的通用方法

7 年前

AnonymousPug 55 · 如何使用Python 3在Tkinter中居中放置标签?

7 年前

PatrikJ · 宽度灵活的灯箱

7 年前

Leon N · 在HTML和CSS页面上居中显示图像

7 年前

Dave · 无法使用文本对齐将文本居中:居中

7 年前

user7803115 · 在较小的父对象中水平居中旋转div

7 年前

Natesh bhat · 如何将QComboBox中的文本设置为与中心对齐,而不使其在PyQt中可编辑

7 年前

Wilson · 使用以css为中心的页面剪裁或省略号文本困难

7 年前