使用 vertical-align 垂直排版 | 點燈坊

當多個不同高度的 inline 或 inline-block 水平並列時，可由 vertical-align 指定各 Element 該如何垂直對齊。

Version

Tailwind CSS 2.0.1

Middle

當文字與圖片並列時，文字將與圖片在垂直方向置中對齊。

<template>
  <div class="inline">JavaScript</div>
  <img class="inline" src="https://picsum.photos/300/200/?random=10">
</template>

<img> 原為 inline，但在 Tailwind 卻被 reset 成 block，因此若要水平排列，必須使用 inline 將 <img> 轉為 inline。

由於 inline 支援 vertical-align，在 Tailwind 其預設值為 middle，因此文字與圖片會在垂直方向置中對齊。

Inline 原本 vertical-align 為 baseline，但在 Tailwind 被 reset 成 middle

Baseline

文字與圖片垂直靠下 baseline 對齊。

<template>
  <div class="inline">JavaScript</div>
  <img class="inline align-baseline" src="https://picsum.photos/300/200/?random=10">
</template>

• align-baseline：使圖片與文字靠下對齊

Top

文字與圖片垂直靠上對齊。

<template>
  <div class="inline">JavaScript</div>
  <img class="inline align-top" src="https://picsum.photos/300/200/?random=10">
</template>

• align-top：使圖片與文字靠上對齊

Bottom

文字與圖片垂直靠下對齊。

<template>
  <div class="inline">JavaScript</div>
  <img class="inline align-bottom" src="https://picsum.photos/300/200/?random=10">
</template>

• align-bottom：使圖片與文字靠下對齊

align-baseline 與 align-bottom 雖然都是垂直靠下，但還是有些差異，可發現 align-baseline 時，p 將會超過圖片，當 align-bottom 卻是圖片與 p 底部切齊

Conclusion

• vertical-align 為 inline 與 inline-block 特別支援 property，因為 inline 與 inline-block 高度由其內容決定，因此會出現各 element 高度不同該如何垂直對齊問題，此時可由 vertical-alignment 決定

Reference

Tailwind CSS, Vertical Alignment