html - 垂直对齐适用于 block 元素

Question

有人告诉我垂直对齐仅适用于行内元素和表格元素，但是，今天我在 block 元素上使用垂直对齐，它工作得很好吗？这怎么可能？在这种情况下，vertical-align 是否适用于所有元素类型？或者，如果不是，它不适用于什么？

#wrap {
border: 1px solid black;
width: 500px;
height: 500px;
}
#alignTop {
vertical-align: top;
border: 1px solid black;
}

<div id = 'wrap'>
<div id = 'alignTop'> alignTop </div>
</div>

Answer 1

根据 This 上记录的解释链接:

• HTML layout traditionally was not designed to specify vertical behavior. By its very nature, it scales width-wise, and the content flows to an appropriate height based on the available width. Traditionally, horizontal sizing and layout is easy; vertical sizing and layout was derived from that.
• vertical-align is used to specify two completely different behaviors depending on where it is used

在表格单元格中垂直对齐

在表格单元格中使用时，vertical-align做大多数人期望的事情，即模仿(旧的，已弃用的)valign属性。在符合标准的现代浏览器中，以下三个代码片段执行相同的操作:

1. <td valign="middle"> <!-- but you shouldn't ever use valign --> </td>
2. <td style="vertical-align:middle"> ... </td>
3. <div style="display:table-cell; vertical-align:middle"> ... </div>

在内联元素上垂直对齐

当 vertical-align应用于 inline 元素，但是，这是一个全新的游戏。在这种情况下，它的行为类似于(旧的，已弃用的)align属性在 <img> 上执行元素。在符合标准的现代浏览器中，以下三个代码片段执行相同的操作:

1. <img align="middle" ...>
2. <img style="vertical-align:middle" ...>
3. <span style="display:inline-block; vertical-align:middle"> foo<br>bar </span>