Html 垂直对齐不'；不起作用，但应该

我在互联网上读过一些文章，其中指出如果元素是以下显示类型之一：

内联

、

内联块

、或

表格单元格

，那么

垂直对齐

应该可以工作。我创造了这个小提琴来检查它，但这似乎不是真的

遵循什么样的最终要求时，

垂直对齐

始终有效？

---

这是我的。

使用外部div上的

显示：表格单元格

和

垂直对齐：底部

：

.a1{
    height: 300px;
    background: #ccc;
    display: table-cell;
    vertical-align: bottom;
}

.a2 {
    height: 20px;
    background-color: #f00;
}

---

使用相对/绝对定位，而不是垂直对齐

.a1{
    height: 300px;
    position: relative;
    background-color: green;
}

.a2 {
    height: 20px;
    display: inline-block;
    background-color: #f00;
    vertical-align: bottom;
    position:absolute;
    bottom:0;
    left:0;
}  

---

您创建了什么小提琴？您想让它居中还是居中？对不起，刚刚添加了小提琴！这正是我想要的，你知道我的小提琴为什么不起作用吗？应该是吗？我不知道，我从来没有听说过垂直对齐应该与

内联

或

内联块

一起使用。。。。但你似乎是对的。这里有一个我发现的小解释：我在那里读过它>在“它实际上做什么”，列表上的第一位，这里是对齐只适用于与内联文本相关的位置，其中元素是。。。据我所知。请参阅文章中的“一些视觉效果”。@user3135147是的，这是因为使用

float

会导致

display:block

。将该元素包装在另一个div中，您可以在该div中指定

float

。