html - 显示 Table-Cell 和 Vertica-Align Middle 不适用于属性集

Question

我有几个 div，内容需要垂直对齐。

在我的父元素上，我有 display: table，在子元素上，我有 display: table-cell;垂直对齐:中间；。

根据我的阅读，这应该足够了。为了在我的 CSS 中进行安全测量，我向我的元素添加了高度以确保它们与父元素的高度相同，并且我还在 CSS 中添加了图像尺寸以保持它们在加载失败时应有的大小。

我做了一个JSFiddle我的代码。

我的 HTML 和 CSS 都处于困惑状态。我认为给出一个工作示例更容易。

Answer 1

来自 https://developer.mozilla.org/en-US/docs/Web/CSS/float

float CSS 属性指定一个元素应该从正常流中取出并放置在其容器的左侧或右侧，文本和内联元素将环绕它。

因为你把它放在一个float里，它就脱离了正常流

设置display: table-cell使元素表现得像 <td>元素