搜尋

CSS 文字水平對齊、垂直對齊

透過網頁呈現文字時，常需要讓文字進行「對齊」，這篇教學會介紹使用使用 CSS 的 text-align、text-align-last 和 vertical-align 等樣式，控制文字水平對齊、垂直對齊和最後一行對齊。

快速導覽：

CSS 教學 - 文字水平對齊、垂直對齊

教學影片

搭配教學影片一起閱讀，效果會更好！歡迎大家訂閱 STEAM 教育學習網的 Youtube 頻道。

前往：https://www.youtube.com/@steam.oxxostudio

text-align 水平對齊

text-align 樣式屬性可以設定「行內容器元素 ( 通常是文字或圖片 ) 水平對齊」( 注意，其他顯示類型的元素不支援水平對齊 )，具有繼承特性，下方列出相關屬性值：

屬性值 說明
start 對齊系統文字方向開頭，左到右系統等同 left，反之為 right，預設值。
end 對齊系統文字方向結尾，左到右系統等同 right，反之為 left。
left 靠左對齊，垂直書寫為靠上對齊。
right 靠右對齊，垂直書寫為靠下對齊。
center 置中對齊。
justify 平均分散對齊，單字間距會自動加大或縮小 ( 最後一行預設按照 start 規則 )。
match-parent 類似繼承，但會根據父元素的文字方向決定對齊方向。

下方範例使用系統文字方向 ( 左到右 ) 的文字，透過 text-align 呈現不同對齊方式。

線上展示：https://codepen.io/oxxo/pen/MWdOqVp

<!-- HTML 程式碼 --> 
<h2>text-align: start;</h2>
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: end;</h2>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: left;</h2>
<div class="c">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: right;</h2>
<div class="d">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: center;</h2>
<div class="e">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: justify;</h2>
<div class="f">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: match-parent;</h2>
<div class="g">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    font-size: 20px;
    color: #dd0066;
    margin: 15px 10px -5px;
  }
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 420px;
  }
  .a {text-align: start;}
  .b {text-align: end;}
  .c {text-align: left;}
  .d {text-align: right;}
  .e {text-align: center;}
  .f {text-align: justify; }
  .g {text-align: match-parent;}
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - text-align 水平對齊

如果是垂直書寫的文字，則 start 和 left 對應到「上方」，end 和 right 則對應到「下方」。

線上展示：https://codepen.io/oxxo/pen/gOJXdeN

<!-- HTML 程式碼 --> 
<h2>text-align: start;</h2>
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: end;</h2>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: left;</h2>
<div class="c">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: right;</h2>
<div class="d">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: center;</h2>
<div class="e">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: justify;</h2>
<div class="f">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>
<h2>text-align: match-parent;</h2>
<div class="g">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/> STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。 </div>

<!-- CSS 程式碼 -->
<style>
  h2 {
    font-size: 20px;
    color: #dd0066;
    margin: 15px 10px -5px;
    float: right;
    writing-mode:vertical-rl;  /* 改成垂直書寫模式 */
  }
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    height: 400px;
    float: right;
    writing-mode: vertical-rl;  /* 改成垂直書寫模式 */
  }
  .a {text-align: start;}
  .b {text-align: end;}
  .c {text-align: left;}
  .d {text-align: right;}
  .e {text-align: center;}
  .f {text-align: justify; }
  .g {text-align: match-parent;}
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - text-align 水平對齊垂直書寫

如果分不清楚 start/left 或 end/right 的差異，可以參考下方範例，在元素裡增加 direction 的樣式，就能觀察左到右、右到左的文字方向，對於文字對齊的影響。

線上展示：https://codepen.io/oxxo/pen/gOJXdeN

<!-- HTML 程式碼 --> 
<h2>text-align: start;</h2>
<div class="a">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>
<h2>text-align: left;</h2>
<div class="b">The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.<br/>STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 400px;
    direction: rtl;         /* 右到左 */
  }
  h2 {
    font-size: 20px;
    color: #dd0066;
    margin: 15px 10px -5px;
    direction: ltr;          /* 左到右 */
  }
  .a {text-align: start;}
  .b {text-align: left;}
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - 文字方向對於文字對齊的影響

text-align-last 最後一行對齊

text-align-last 樣式屬性可以設定「文字的最後一行對齊」，具有繼承特性，text-align-last 的屬性和 text-align 幾乎相同。

屬性值 說明
start 對齊系統文字方向開頭，左到右系統等同 left，反之為 right，預設值。
end 對齊系統文字方向結尾，左到右系統等同 right，反之為 left。
left 靠左對齊，垂直書寫為靠上對齊。
right 靠右對齊，垂直書寫為靠下對齊。
center 置中對齊。
justify 平均分散對齊，單字間距會自動加大或縮小。

使用時需要注意。最後一行是指「軟換行」產生的最後一行 ( 文字長度超過單行限制而自動換行 )，如果使用「硬換行」產生的換行 ( 使用 <br/> 元素強制換行 )，硬換行前的文字為前一段的最後一行，後一段則再度從第一行開始算起。

從下方範例可以看出，如果遇到 <br/> 元素，前一行會被視作最後一行，而按照 text-align-last 所設定的方式對齊，如果沒有 <br/>，text-align-last 就會真正控制文字在區塊中的最後一行 ( 箭頭處為最後一行 )。

線上展示：https://codepen.io/oxxo/pen/pomdxjr

<!-- HTML 程式碼 --> 
<h2>text-align-last: end; ( 有 br )</h2>
<div class="a">
  The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.
  <br/>
  STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>
<h2>text-align-last: end; ( 沒有 br )</h2>
<div class="b">
  The STEAM Education Website enables everyone to easily enter the learning realm of STEAM.STEAM 教育學習網透過一系列免費且高品質的教學與範例，讓所有人都能輕鬆跨入 STEAM 的學習領域。
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 400px;
  }
  h2 {
    font-size: 20px;
    color: #dd0066;
    margin: 15px 10px -5px;
  }
  .a {
    text-align: start;
    text-align-last: end;
  }
  .b {
    text-align: start;
    text-align-last: end;
  }
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - text-align-last 最後一行對齊

除了硬換行和軟換行的差異，如果文字只有「單一行」，text-align-last 的權重會高於 text-align ( 通常設定 text-align 就能搞定大多數的狀況 )，下方的範例雖然將 text-align:start;，但因為又設定了 text-align-last:end;，就算排列順序擺在前方，權重仍然比較高，最後就會呈現對齊右邊的狀況。

線上展示：https://codepen.io/oxxo/pen/LYoOgGa

<!-- HTML 程式碼 --> 
<div>Hello Oxxo!!</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    width: 400px;
    text-align-last: end;  /* 雖然擺在前面，但權重仍高於 text-align */
    text-align: start;
  }
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - text-align-last 只有單一行

vertical-align 垂直對齊

vertical-align 樣式屬性可以設定「行內元素和表格元素」與「父元素行框參考線」的垂直對齊 ( 注意，其他顯示類型的元素無法使用垂直對齊樣式 )，沒有繼承特性，這些基準線會根據字體的不同而有所不同 ( 上標線和下標線通常由瀏覽器或作業系統定義 )。

參考：容器顯示類型 ( display )、行內容器排版格式 ( IFC )

屬性值 說明
baseline 對齊基準線，預設值。
middle 對齊中線 ( 基本上是小寫字母的一半 )。
sub 對齊下標線。
super 對齊上標線。
top 對齊行框上緣。
bottom 對齊行框下緣。
text-top 對齊文字內容區域上緣。
text-bottom 對齊文字內容區域下緣。
長度 從基準線提升或減少對應的長度數值。
百分比 從基準線提升或減少行高的百分比。

CSS 教學 - 文字水平對齊、垂直對齊 - 基準線

vertical-align: baseline 垂直對齊基準線

垂直對齊 baseline 是所有行內元素和表格垂直對齊的預設值，會對齊父元素行框的基準線 ( baseline )，通常會有下列幾種情況：

  • 注意，通常預設行高是 1.2，表示文字尺寸的 1.2 倍，但不同字體可能會有不同預設值。
  • 如果元素裡包含「文字」，就算使用 display 樣式屬性強制更換顯示類型進行垂直對齊，仍然會以元素裡「最後一行文字」的作為對齊的參考依據。
狀況 行框高度
父元素行高 > 子元素最大行高 父元素行高
父元素行高 < 子元素最大行高 子元素最大行高
父元素或子元素最大行高 < 圖片高度 圖片高度 + 對齊後多出來的行高

下方範例展示三種不同的情境，三個情境中的最左邊的 div 展示父元素沒有文字但仍然會產生行框，但文字尺寸仍然會影響行框高度，中間的 div 表示父元素有文字，最右邊的粉紅色 div 是 60px 高度的對照參考 ( 如果父元素文字尺寸 50px，行高 1.2 會等於 60px )，可以特別注意當子元素行高較大 ( 文字尺寸較大所以行高較大 ) 或出現高度較高圖片的時候，就會發生行框高度被撐開的狀況，雖然被行框撐開，但所有元素都會對齊父元素文字的 baseline，這也是為什麼圖片進行垂直置中對齊時，常常會出現底部空白空間的原因。

<!-- HTML 程式碼 -->
父元素行高大於子元素行高
<section class="s1">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>

父元素行高小於子元素行高
<section class="s2">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
  
父元素行高小於子元素行高、加入圖片
<section class="s3">
<div><span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2"></div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 30px;
  }
  div {
    background: orange;
    float: left;
    line-height: 1.2;   /* 設定行高為 1.2，因為不同字體預設值會有所不同 */
    font-size: 50px;    /* 父元素行高 50 x 1.2 = 60px */
  }
  .d1 {margin-left: 10px;}
  div * {vertical-align: baseline;} /* 所有子元素對齊 baseline */
  .s1 .a {
    font-size: 20px;    /* .s1 子元素行高 20 x 1.2 = 24px，使用父元素 60px 撐開行框 */
    background: #0f08;
  }
  .s1 .b {
    font-size: 10px;    /* .s1 子元素行高 10 x 1.2 = 12px，使用父元素 60px 撐開行框 */
    background: #00f6;
  }
  .s2 .a {
    font-size: 100px;   /* .s2 子元素行高 100 x 1.2 = 120px，使用 .a 子元素 120px 撐開行框 */
    background: #0f08;
  }
  .s2 .b {
    font-size: 80px;    /* .s2 子元素行高 80 x 1.2 = 96px，使用 .a 子元素 120px 撐開行框 */
    background: #00f6;
  }
  .s3 .a {
    font-size: 80px;    /* .s3 子元素行高 80 x 1.2 = 96px，和父元素行高都小於圖片高度 150px，對齊後和圖片高度計算產生最後高度 */
    background: #0f08;
  }
  .s3 .b {
    font-size: 20px;   /* .s3 子元素行高 20 x 1.2 = 24px，和父元素行高都小於圖片高度 150px，對齊後和圖片高度計算產生最後高度 */
    background: #00f6;
  }
  img {width: 50px;}
  .img1 {height: 150px;}
  .img2 {height: 20px;}
  .d2 {
    margin-left: 10px;
    height: 60px;
    background: pink;
    width: 20px;
  }
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - baseline 垂直對齊基準線

vertical-align: middle 垂直對齊中線

垂直對齊 middle 是「最容易搞錯」的樣式屬性，表示用「子元素」的中線，去對齊父元素行框中「小寫字母的中線」，因為是對齊小寫字母中線，所以對齊時往往會發現「無法垂直置中」的狀況 ( 因為不是子元素中線對齊行框中線 )，但如果子元素高度大於父元素，反而是父元素會發生移動，讓子母中線去去對齊子元素中線，就會真正垂直置中，下方列出幾種常見的狀況：

狀況 行框高度 真正垂直置中
父元素行高 > 子元素最大行高 父元素行高 X
父元素行高 < 子元素最大行高 子元素最大行高 O
父元素行高 > 圖片高度或子元素最大行高 父元素行高 X
父元素或子元素最大行高 < 圖片高度 圖片高度 O

下方範例展示四種不同的情境，情境中的最左邊的 div 展示父元素沒有文字但仍然會產生行框，但文字尺寸仍然會影響行框高度，中間的 div 表示父元素有文字，最右邊的粉紅色 div 是 120px 高度的對照參考 ( 如果父元素文字尺寸 100px，行高 1.2 會等於 120px )，可以特別注意當父元行高較大的時候，會發生子元素去對齊父元素小寫字母中線，無法真正垂直置中。

<!-- HTML 程式碼 -->
父元素行高大於子元素行高
<section class="s1">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gfg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>

父元素行高小於子元素行高
<section class="s2">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gfg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>
  
父元素行高和子元素的最大行高都小於圖片高度
<section class="s3">
<div><span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d1">Gfg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2"></div>
</section>
  
父元素行高大於子元素的最大行高或圖片高度
<section class="s4">
<div><span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d1">Gfg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2"></div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 50px;
  }
  div {
    background: orange;
    float: left;
    line-height: 1.2;    /* 設定行高為 1.2，因為不同字體預設值會有所不同 */
    font-size: 100px;    /* 父元素行高 100 x 1.2 = 120px */
  }
  .d1 {margin-left: 10px;}
  div * {vertical-align: middle;}
  .s1 .a {
    font-size: 50px;     /* .s1 子元素行高 50 x 1.2 = 60px，使用父元素 120px 撐開行框，子元素中線對齊父元素小寫字母中線 */
    background: #0f08;
  }
  .s1 .b {
    font-size: 30px;     /* .s1 子元素行高 30 x 1.2 = 36px，使用父元素 120px 撐開行框，子元素中線對齊父元素小寫字母中線 */
    background: #00f6;
  }
  .s2 .a {
    font-size: 120px;    /* .s2 子元素行高 120 x 1.2 = 144px，使用 144px 撐開行框，父元素小寫字母中線去對齊子元素中線 */
    background: #0f08;
  }
  .s2 .b {
    font-size: 80px;    /* .s2 子元素行高 80 x 1.2 = 96px，使用 144px 撐開行框，中線去對齊最大的子元素中線 */
    background: #00f6;
  }
  .s3 .a,
  .s4 .a{
    font-size: 80px;     /* .s3 .s4 子元素行高 80 x 1.2 = 96px，和圖片判斷哪個比較高，然後對齊中線 */
    background: #0f08;
  }
  .s3 .b,
  .s4 .b{
    font-size: 20px;     /* .s3 .s4 子元素行高 20 x 1.2 = 24px，和圖片判斷哪個比較高，然後對齊中線 */
    background: #00f6;
  }
  img {width: 50px;}
  .img1 {height: 150px;}
  .img2 {height: 20px;}
  .s4 .img1 {height: 50px;}
  .d2 {
    margin-left: 10px;
    height: 120px;
    background: pink;
    width: 20px;
  }
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - vertical-align:middle 對齊中線

因為 middle 屬性值的特性，在進行垂直置中時，其中一種方式會先在父元素建立一個「虛擬元素」，並將其顯示屬性改為 inline-block，接著將這個虛擬元素撐開到比父元素預設行框高度還要大 ( 改變父元素的行高、改變虛擬元素高度等做法 )，如此就能採用類似上方範例「圖片高度較大」的對齊方式，讓子元素全部都對齊這個虛擬元素的中線，實現真正垂直對齊的效果，下方範例將父元素行高設為 0.5，並設定虛擬元素高度為 100px，實現真正垂直置中效果。

線上展示：https://codepen.io/oxxo/pen/yyNrEEo

<!-- HTML 程式碼 -->
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gfg<span class="a">Gg</span><span class="b">Gg</span></div>

<!-- CSS 程式碼 -->
<style>
  div {
    background: orange;
    float: left;
    line-height: 0.5;  /* 行高為 100 x 0.5 = 50px，小於虛擬元素高度，對齊虛擬元素 */
    font-size: 100px;
  }
  div * { vertical-align: middle;}
  .d1 {margin-left: 10px;}
  .a {
    font-size: 50px;   /* 行高為 50 x 0.5 = 25px，小於虛擬元素高度，對齊虛擬元素 */
    background: #0f08;
  }

  .b {
    font-size: 30px;   /* 行高為 30 x 0.5 = 15px，小於虛擬元素高度，對齊虛擬元素 */
    background: #00f6;
  }
  div::before {
    content: "";
    display: inline-block;  /* 改變虛擬元素顯示類型 */
    height: 100px;          /* 改變虛擬元素高度為 100px */
    width: 0;
    vertical-align: middle; /* 虛擬元素要額外設定垂直對齊 */
  }

</style>

CSS 教學 - 文字水平對齊、垂直對齊 - vertical-align:middle 搭配虛擬元素實現真正垂直置中

vertical-align: sub | super 垂直對齊下標、上標

sub 和 super 使用後會將行內元素的「baseline 基準線」，對齊父元素行框文字的「上標線」和「下標線」，如果是圖片、表格或表單元素，會使用底線作為 baseline 進行對齊，但因為對齊後子元素的行高可能會超過行框高度，可能會有下列幾種情況：

注意，如果元素裡包含「文字」，就算使用 display 樣式屬性強制更換顯示類型進行垂直對齊，仍然會以元素裡「最後一行文字」的作為「上標線」和「下標線」的參考依據。

狀況 行框高度
子元素對齊後，行高超過行框高度 高度加上超過的數值
子元素對齊後，行高小於行框高度 行框原本高度 ( 父元素行高決定 )
圖片對齊後，高度超過行框高度 高度加上超過的數值
圖片對齊後，高度小於行框高度 行框原本高度 ( 父元素行高決定 )

下方範例會展示多種對齊 super 的狀況，最後方的粉紅 div 是行框原始高度的對照，可以特別觀察對齊後撐開行框高度的元素 ( 由於對齊 sub 下標線的做法和對齊上標線完全相同，就只單純展示上標線，可自行修改為 sub 觀察對齊下標線效果 )。

<!-- HTML 程式碼 -->
子元素對齊後行高沒有超過行框高度
<section class="s1">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>

子元素對齊後行高超過行框高度
<section class="s2">
<div><span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2"></div>
</section>

圖片對齊後高度超過行框高度
<section class="s3">
<div><span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2"></div>
</section>

圖片對齊後高度沒有超過行框高度
<section class="s4">
<div><span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2"></div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 50px;
  }
  div {
    background: orange;
    float: left;
    line-height: 1.2;    /* 設定行高為 1.2，因為不同字體預設值會有所不同 */
    font-size: 100px;    /* 父元素行高 100 x 1.2 = 120px */
  }
  .d1 {margin-left: 10px;}
  section div * {vertical-align: super;}
  .s1 div * {line-height: 0;}
  .a {
    font-size: 50px;     /* 基本上子元素行高 50 x 1.2 = 60px，使用父元素 120px 撐開行框 */
    background: #0f08;
  }
  .b {
    font-size: 30px;     /* 基本上子元素行高 30 x 1.2 = 36px，使用父元素 120px 撐開行框 */
    background: #00f6;
  }
  .s2 div * {line-height: 3;}   /* .s2 子元素行高 50 x 3 = 150px，使用父元素 150px 撐開行框 */
  img {width: 50px;}
  .img1 {height: 150px;}
  .img2 {height: 20px;}
  .s3 .img1 {height: 50px;}
  .d2 {
    margin-left: 10px;
    height: 120px;
    background: pink;
    width: 20px;
  }
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - sub 對齊下標、super 對齊上標

vertical-align: top | bottom 垂直對齊行框上緣、下方

top 和 bottom 使用後會對齊父元素「行框」的上緣或下緣，在大部分的情況下，可以很有效的靠上或靠下對齊，但如果有行高較高的子元素，也是會發生將父元素行框撐開的狀況，通常有下列幾種情境：

狀況 行框高度
行框高度 > 子元素和父元素計算的最大高度 不變
行框高度 < 子元素和父元素計算的最大高度 被撐開

下方範例會展示對齊行框上緣與下緣的情境，粉紅色 div 是正常的行框高度，可以注意當子元素行高過高，或圖片高度過高時，會發生撐開行框的狀況。

線上展示：https://codepen.io/oxxo/pen/zYQPMzx

<!-- HTML 程式碼 -->
父元素行框高度不變
<section class="s1">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s2">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d3">Gg</div>
</section>
父元素行框高度不變
<section class="s3">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s4">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 100px;
  }
  div {
    background: orange;
    float: left;
    line-height: 1;
    font-size: 120px; 
  }
  .d1, .d2, .d3 {margin-left: 5px;}
  .d3 {background: pink;}
  div * {line-height: 2;}
  .d1 * {vertical-align: top;}
  .d2 * {vertical-align: bottom;}
  .s1 .a, .s3 .a { 
    font-size: 50px; 
    background: #0f08;
  }
  .s1 .b, .s3 .b { 
    font-size: 20px; 
    background: #06f8;
  }
  .s2 .a, .s4 .a { 
    line-height: 4;  /* 讓子元素行高較高，撐開行框 */
    font-size: 50px; 
    background: #0f08;
  }
  .s2 .b, .s4 .b { 
    font-size: 20px; 
    background: #06f8;
  }
  img {width: 50px;}
  .img1 {height: 100px;}
  .img2 {height: 20px;}
  .s4 .img1 {height: 300px;}  /* 讓圖片較高，撐開行框 */
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - top 對齊上方、bottom 對齊下方

vertical-align: text-top | text-bottom 對齊文字內容區域上方、下方

text-top 和 text-bottom 使用後會對齊行框「文字內容區域」的上緣或下緣，特別注意因為每種字型的內容區域高度不同，且內容區域無法透過樣式屬性修改，如果使用不同字體，很容易出現無法準確對齊的狀況，因此如果要進行靠上或靠下對齊，建議採用 top 或 bottom 會更為準確，下方列出一些常見的使用情況：

狀況 行框高度
行框高度 > 子元素和父元素計算的最大高度 不變
行框高度 < 子元素和父元素計算的最大高度 被撐開，如果是靠下對齊，內容區域下移

下方範例會展示對齊行框文字內容區域上緣與下緣的情境，如果要呈現準確的內容區域，可以在使用字體時不要設定行高，所呈現的高度就是內容區域高度，範例中粉紅色 div 是父元素行框內容區域高度高度，可以注意當子元素行高過高，或圖片高度過高時，會發生撐開行框的狀況，也會一併造成父元素行框內容區域往下移動。

線上展示：https://codepen.io/oxxo/pen/jOoaQGd

<!-- HTML 程式碼 -->
父元素行框高度不變
<section class="s1">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s2">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span></div>
<div class="d3">Gg</div>
</section>
父元素行框高度不變
<section class="s3">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s4">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 100px;
  }
  div {
    background: orange;
    float: left;
    font-size: 120px;  /* 不要設定行高，行高就會等於內容區域，呈現內容區域高度 */
  }
  .d1, .d2, .d3 {margin-left: 5px;}
  .d3 {background: pink;}
  div * {line-height: 2;}
  .d1 * {vertical-align: top;}
  .d2 * {vertical-align: bottom;}
  .s1 .a, .s3 .a { 
    font-size: 50px; 
    background: #0f08;
  }
  .s1 .b, .s3 .b { 
    font-size: 20px; 
    background: #06f8;
  }
  .s2 .a, .s4 .a { 
    line-height: 4;  /* 讓子元素行高較高，撐開行框 */
    font-size: 50px; 
    background: #0f08;
  }
  .s2 .b, .s4 .b { 
    font-size: 20px; 
    background: #06f8;
  }
  img {width: 50px;}
  .img1 {height: 100px;}
  .img2 {height: 20px;}
  .s4 .img1 {height: 240px;}  /* 讓圖片較高，撐開行框 */
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - top 對齊上方、bottom 對齊下方

vertical-align: 長度

使用「長度」作為垂直對齊的屬性後，會將所設定元素的 baseline，對齊父元素行框文字的「baseline + 長度」，正值向上升高，負值向下降低，如果使用 px 則為絕對長度單位，使用 em 為單位則會乘以元素字體的尺寸，如果子元素行高或圖片行高超過父元素行框高度，就會發生撐開行框的狀況。

線上展示：https://codepen.io/oxxo/pen/NWVwEYE

<!-- HTML 程式碼 -->
父元素行框高度不變 ( 向下還是撐開了 )
<section class="s1">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s2">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 120px;
    margin: 0 0 100px;
  }
  div {
    background: orange;
    float: left;
    font-size: 120px; 
  }
  .d1, .d2, .d3 {margin-left: 5px;}
  .d3 {background: pink;}
  .d1 * {vertical-align: 50px;}
  .d2 * {vertical-align: -50px;}
  div .a{ 
    font-size: 50px; 
    background: #0f08;
  }
  div .b { 
    font-size: 20px; 
    background: #06f8;
  }
  img {width: 30px;}
  .img1 {height: 50px;}
  .img2 {height: 20px;}
  .s2 .img1 {height: 240px;}
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - 使用長度垂直對齊

vertical-align: 百分比

使用「長度」作為垂直對齊的屬性後，會將所設定元素的 baseline，對齊父元素行框文字的「baseline + 子元素行高的百分比」，正值向上升高，負值向下降低，因為是使用子元素的行高，如果計算後行高不同，就會對齊在不同的位置，如果是「圖片或表格」等沒有行高的元素，會使用行框高度的百分比，如果子元素行高或圖片行高超過父元素行框高度，就會發生撐開行框的狀況。

線上展示：https://codepen.io/oxxo/pen/eYaeQQN

<!-- HTML 程式碼 -->
父元素行框高度不變
<section class="s1">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>
父元素行框高度被撐開
<section class="s2">
<div class="d1">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d2">Gg<span class="a">Gg</span><span class="b">Gg</span><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1"><img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2"></div>
<div class="d3">Gg</div>
</section>

<!-- CSS 程式碼 -->
<style>
  section {
    height: 150px;
    margin: 0 0 100px;
  }
  div {
    background: orange;
    float: left;
    font-size: 120px; 
    line-height: 2;
  }
  .d1, .d2, .d3 {margin-left: 5px;}
  .d3 {background: pink;}
  .d1 * {vertical-align: 30%;}
  .d2 * {vertical-align: -30%;}
  div .a{ 
    font-size: 50px; 
    background: #0f08;
  }
  div .b { 
    font-size: 20px; 
    background: #06f8;
  }
  img {width: 30px;}
  .img1 {height: 50px;}
  .img2 {height: 20px;}
  .s2 .img1 {height: 240px;}
</style>

CSS 教學 - 文字水平對齊、垂直對齊 - 使用百分比垂直對齊

小結

水平對齊和垂直對齊是排版中非常重要的技巧，只要熟練應用這篇教學所介紹的對齊樣式和屬性，就能輕鬆掌握排版對齊的方式。

意見回饋

如果有任何建議或問題，可傳送「意見表單」給我，謝謝～

CSS 教學

基本介紹

認識 CSS 開始使用 CSS CSS 語法規則 CSS 命名原則 CSS 常用樣式屬性

CSS 選擇器

認識 CSS 選擇器 優先順序 ( 權重 ) 樣式繼承與聯集 使用巢狀結構語法 元素選擇器 ID 和 Class 選擇器 屬性選擇器 文件結構選擇器 虛擬類別選擇器 ( 結構 ) 虛擬類別選擇器 ( 類型 ) 虛擬類別選擇器 ( 輸入 ) 虛擬類別選擇器 ( 行為 ) 虛擬類別選擇器 ( 超連結 ) 虛擬類別選擇器 ( 邏輯 ) 虛擬類別選擇器 ( 其他 ) 虛擬元素選擇器 群組與組合選擇器

數值與單位

全域關鍵字與文字數值 長度與角度單位 位置名稱與時間單位 特殊樣式屬性 ( all、appearance)

規則與定義

變數 ( Variables ) 媒體查詢 ( @media ) 容器查詢 ( @container ) 自訂屬性值 ( @property ) 匯入樣式 ( @import ) 分層優先順序 ( @layer ) 選擇器作用域 ( @scope ) 定義字型 ( @font-face ) 計數規則 ( @counter-style ) 列印網頁 ( @page )

函式類型

數學計算 文字與清單計數 形狀與線段 路徑 ( path )

顏色與濾鏡

顏色單位 色彩模型 相對顏色 漸層色 影像濾鏡 ( filter ) 背景濾鏡 ( backdrop-filter ) 混合模式 ( mix-blend-mode )

文字與段落

設定字型 ( font-family ) 使用外部字型 文字尺寸 文字樣式 ( 常用 ) 文字樣式 ( 其他實用 ) 文字樣式 ( 特殊用途 ) 文字換行 文字空白與 Tab 大小 文字行高與縮排 文字水平與垂直對齊 文字書寫方向 文字自動分欄 使用 Color Font ( 彩色字型 ) 使用 Icon Font ( 圖示文字 ) 製作自己的 Icon Font 顯示生成內容與引號

元素容器

容器顯示類型 ( display ) 元素 display 對照表 盒子模型 ( Box Model ) 寬高尺寸 內邊距 ( padding ) 外邊界 ( margin ) 邊框 ( border ) 邊框圓角 ( border-radius ) 影像邊框 ( border-image ) 輪廓 ( outline ) 內容溢出與裁切 ( overflow ) 內容範圍 ( contain ) 可見性與透明度 縮放與調整 ( zoom、resize )

背景與陰影

背景 ( 背景色、背景裁切 ) 背景圖 ( 定位、尺寸 ) 背景圖 ( 固定、重複 ) 背景圖 ( 多重背景、混合 ) 背景縮寫 ( background ) 容器陰影 ( box-shadow )

清單與表格

清單樣式 清單計數器 表格基本樣式 表格邊框樣式 表格內容寬度與對齊

基本排版與定位

元素排版方式 浮動 ( float ) 浮動形狀 ( shape-* ) 定位 ( position ) 邏輯屬性 ( logical properties ) 重置 CSS ( Reset CSS ) 水平置中技巧 垂直置中技巧

Flex 彈性排版

Flexbox 彈性盒子 Flex 對齊方式 Flex 彈性伸縮

Grid 網格排版

Grid 網格容器與格線 Grid 網格空間與命名 Grid 網格流向與間距 Grid 排列網格項目 Grid 項目對齊與順序

轉場與動畫

轉場 ( transition ) 轉場觸發事件 動畫 ( animation ) 自訂動畫路徑 ( offset ) 動畫觸發事件 多重動畫的權重與順序 動畫進度控制 ( timeline )

變形、裁切與遮罩

裁切路徑 ( clip-path ) 影像遮罩 ( mask ) 物件填滿方式與定位 轉換函式 ( transform ) 平移、旋轉與縮放 3D 轉換與透視

視窗與使用者行為

捲軸樣式 ( scrollbar ) 拉霸、滑桿樣式 ( slider ) 滑鼠游標圖示 ( cursor ) 滑鼠事件 ( pointer-events ) 使用者選取 ( user-select ) 捲動行為 ( scroll、overscroll ) 列印換頁 ( break-* )

CSS 預處理器

認識 CSS 預處理器 Less ( 安裝、開始使用 ) Less ( 巢狀結構、選擇器 ) Less ( 變數、import ) Less ( Extend、Mixin ) Less ( 邏輯、迴圈、函式 )

範例效果

CSS 圓餅圖 CSS 跑馬燈 Google 載入動畫 電子時鐘數字 漸層色的轉場與動畫 漸層色製作星空背景 漸層色邊框 漸層色製作圖案背景 不規則形狀動畫 彈跳的正方形動畫 3D 正多面體 超連結底線動畫效果 噁心黏黏球效果 CSS 視差滾動效果 捲軸控制放射形選單 捲軸改變文字背景色 CSS 頁面捲動進度條 CSS 水波效果 圓點載入動畫 ( 陰影動畫 ) 字母翻牌效果 探照燈動畫 立體雙色跑馬燈 樓梯文字動態效果 漸層色文字、雙色文字 流動色彩文字 空心文字、文字水波背景 左右傾斜的背景效果 Icon 圖示形狀變換 故障文字效果 按鈕的多種 hover 效果 點擊展開或收折的選單 點擊愛心圖案放射效果 純 CSS 數字載入進度條 純 CSS 碼表 ( 可計時 )