html - 垂直对齐 : A Full Explanation

Question

我一直在为垂直对齐而苦苦挣扎，这是一个看似足够简单的过程，但在不同的语言和元素类型中有很多特质。我已经通过 stackexchange 进行了大量阅读，但似乎无法找到共同的理解思路。

以下是我能够收集到的规则:

1) 垂直对齐在 <\div> 中不起作用s，你必须设置div {display: table-cell; vertical-align: middle}

这看起来很麻烦，尤其是因为表格单元格会覆盖高度限制，即使溢出设置为隐藏并扩展以适合内容，这意味着垂直“中心”是可变的。

我刚刚从 Pinterest 阅读了一些源代码，其中 button {vertical-align: middle} ，但没有其他 vertical-align命令似乎有效。按钮似乎默认居中对齐。

有人可以为 vertical-align 提供一个明确的解释吗？属性？

什么html元素响应 vertical-align ？

哪些html元素有默认 vertical-align属性？

哪些html元素具有不可覆盖 vertical-align属性？

任何关于理解特质的线索也会有所帮助!

提前致谢!

Answer 1

垂直对齐有两个选项

一个在元素上。

Vertical-align 适用于 inline 元素而不是 block 元素。然后可以直接在元素中设置proeperty与其他内联元素对齐。

两个在容器上

您可以像 table-cell 一样在容器上设置属性。您可以垂直对齐 td 上的元素，或者用两个 div 伪造它，一个带有 display:table 并在 display 内: table-cell 垂直对齐内容的 div。