垂直對齊適用於塊元素

Question

有人告訴我，vertical-align僅適用於內聯和表元素，但是，今天，我在一個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

默認情況下block元素堆疊在彼此的頂部，所以這是行不通的。

請參閱W3C

在塊格式設置上下文中，將框從包含塊的頂部開始垂直地一個接一個地布置。 兩個兄弟箱之間的垂直距離由'margin'屬性確定。 塊格式設置上下文中相鄰塊級框之間的垂直邊距折疊。

而且您可以在W3C上看到， vertical-align在block元素中不起作用，僅適用於inline-level和table-cell

 Value: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit Initial: baseline Applies to: inline-level and 'table-cell' elements Inherited: no Percentages: refer to the 'line-height' of the element itself Media: visual Computed value: for <percentage> and <length> the absolute length, otherwise as specified 

片段

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

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

Answer 2

根據此鏈接上記錄的說明：

• 傳統上，HTML布局並非旨在指定垂直行為。 就其本質而言，它沿寬度方向縮放，並且內容物根據可用寬度流動到適當的高度。 傳統上，水平調整和布局很容易； 由此得出垂直尺寸和布局。
• vertical-align用於vertical-align使用位置指定兩種完全不同的行為

在表格單元格中垂直對齊

當在表單元格中使用時， 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應用於內聯元素時，這是一個全新的游戲。 在這種情況下，它的行為就像<img>元素上的（舊的，已棄用的） align屬性一樣。 在現代的，符合標准的瀏覽器中，以下三個代碼段執行相同的操作：

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