css - 如何垂直对齐列表？

Question

我试图垂直对齐列表的文本，但没有成功。

li{
    height: 100px;
    display: inline-block;
    vertical-align: middle;
    border: 1px solid red;
}

jsfiddle

Answer 1

你可以使用 display:flex;对于较新的浏览器，如果您不想编辑 HTML: DEMO

ul{
    width: 50%;
}
li{
    height: 100px;
    display:block;/* or else as fall back to erase bullets */
    display: flex;
    justify-content:center;
    flex-direction:column;;
    border: 1px solid red;
}

如果浏览器不理解 display:flex; ，内容将站在顶部。

---

如果你想将文本、li 的内容包装在一个额外的容器中，那么可以使用 display:table/table-cell: DEMO 或其他使用伪和 vertical-align+inline-block; 的技术: DEMO