vertical-align 是 CSS 中用來控制行內（inline）或表格單元格（table-cell）內容垂直對齊的屬性。它常常讓人感到困惑，尤其是搭配 inline-block 使用時。
vertical-align 的適用範圍
重要：vertical-align 只對以下元素有效：
display: inline 的元素display: inline-block 的元素display: table-cell 的元素
對 block 或 flex 元素無效。
常見的值
1
2
3
4
5
6
7
8
9
10
|
.element {
vertical-align: baseline; /* 預設值：對齊父元素的文字基線 */
vertical-align: top; /* 對齊行盒（line box）的頂部 */
vertical-align: middle; /* 對齊父元素的中線 */
vertical-align: bottom; /* 對齊行盒的底部 */
vertical-align: text-top; /* 對齊父元素文字的頂部 */
vertical-align: text-bottom; /* 對齊父元素文字的底部 */
vertical-align: 10px; /* 以像素為單位，向上偏移 */
vertical-align: -5px; /* 向下偏移 */
}
|
inline-block 元素出現神秘空白縫隙
這是最常踩到的雷。多個 inline-block 元素之間會出現空白間距，原因是 HTML 中元素之間的空白字元（換行、空格）也算作行內文字。
1
2
3
4
|
<!-- 這種寫法會產生空白縫隙 -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
|
1
2
3
4
5
6
|
.box {
display: inline-block;
width: 100px;
height: 100px;
background: #ccc;
}
|
解決空白縫隙的方法
方法一：消除 HTML 中的空白（不推薦，不易維護）
1
|
<div class="box"></div><div class="box"></div><div class="box"></div>
|
方法二：父元素設定 font-size: 0
1
2
3
4
5
6
7
|
.parent {
font-size: 0;
}
.box {
display: inline-block;
font-size: 16px; /* 子元素重新設定字體大小 */
}
|
方法三：使用負 margin（不推薦）
1
2
3
4
|
.box {
display: inline-block;
margin-right: -4px;
}
|
方法四：改用 Flexbox（最推薦）
1
2
3
|
.parent {
display: flex;
}
|
inline-block 元素底部有空白的問題
inline-block 元素預設 vertical-align: baseline，導致元素底部與文字基線對齊，圖片或方塊下方會出現幾像素的空隙。
1
2
3
4
5
6
7
8
9
10
|
/* 解法：修改 vertical-align */
.box {
display: inline-block;
vertical-align: top; /* 或 middle, bottom */
}
/* 或是修改為 block */
img {
display: block;
}
|
垂直置中的正確做法
若要讓 inline-block 元素在容器中垂直置中，需要在父元素上設定 line-height，或改用 Flexbox：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
/* 方法一：line-height（適合單行） */
.parent {
height: 100px;
line-height: 100px;
}
.child {
display: inline-block;
vertical-align: middle;
line-height: normal; /* 重置子元素 */
}
/* 方法二：Flexbox（推薦） */
.parent {
display: flex;
align-items: center;
justify-content: center;
}
|
總結
vertical-align 的行為複雜，是因為它依賴「行盒（line box）」和「基線（baseline）」的概念。在現代開發中，遇到垂直對齊問題，優先考慮使用 Flexbox 或 Grid，比 vertical-align 更直覺且可預測。