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

谢谢你的帮助,伙计们!

推荐文章

William Entriken · 排列不同尺寸的徽章

7 年前

user438461 · 在我的WPF选项卡项中设置VerticalContentAlignment会更改选项卡中的文本和选项卡中包含的控件

7 年前

SmallSani · 当更改内容时,如何在页面上垂直居中放置div?

7 年前

Benji · -webkit背景剪辑:文本和垂直居中文本

7 年前

Travis Martin · flexbox布局中的垂直文本

7 年前

Mike Waldrup · 弹性物品被撞倒,正好是前一件物品的一半高度

7 年前

karlo1zg · 垂直对齐输入元素中间的浮动标签

7 年前

Ahmed Elashker · Xamarin在平台垂直选项上形成XAML

7 年前

coreysimons · 动态布局中的图像对齐

7 年前

Théo Clayette · 设置垂直Android工具栏

7 年前