文字水平對齊、垂直對齊

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

快速導覽：

text-align 水平對齊

text-align-last 最後一行對齊

vertical-align 垂直對齊

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

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 樣式屬性可以設定「行內元素和表格元素的垂直對齊」( 注意，其他顯示類型的元素無法使用垂直對齊樣式 )，沒有繼承特性，具有下列屬性值：

屬性值	說明
baseline	對齊基準線，預設值。
middle	平均分散對齊，單字間距會自動加大或縮小。
sub	對齊下標線。
super	對齊上標線。
top	對齊父元素最上方。
bottom	對齊父元素最下方。
text-top	靠右對齊，垂直書寫為靠下對齊。
text-bottom	置中對齊。
長度	平均分散對齊，單字間距會自動加大或縮小。
百分比	平均分散對齊，單字間距會自動加大或縮小。

屬性中的 baseline、sub、super 和 middle 分別會對應行內元素內容區域所設定的基準線，下圖呈現一個字型所具有的基準線 ( 上標線和下標線通常是根據瀏覽器或作業系統定義 )。

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

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

baseline 是所有行內元素和表格垂直對齊的預設值，如果是圖片、表格或表單元素，則會採用「底部對齊基準線」，下方範例展示垂直對齊基準線的效果。

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

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">baseline</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="a">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {width: 200px;}  /* 一張圖片比較大 */
  .img2{width: 20px;}    /* 一張圖片比較小 */
  .a {vertical-align: baseline;}
  .b {
    font-size: 30px;
    vertical-align: baseline;
  }
</style>

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

vertical-align: middle 垂直對齊中線

middle 使用後會對齊所有行內元素的「中線」，如果畫面中有一個比較高的元素，就會讓其他所有元素一起垂直對齊，這也是許多「垂直對齊」常用的基本方法。

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="a">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {
    width: 200px;
    vertical-align: middle;
  }
  .img2{
    width: 20px;
    vertical-align: middle;
  }
  .a {vertical-align: middle;}
  .b {
    font-size: 30px;
    vertical-align: middle;
  }
</style>

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

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

sub 和 super 使用後會將行內元素「baseline 基準線」，對齊系統定義的「上標線」和「下標線」，如果是圖片、表格或表單元素，會使用底線作為 baseline 進行對齊。

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

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="a">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {
    width: 200px;
    vertical-align: baseline;   /* 第一張圖片設定基準線 */
  }
  .img2{
    width: 40px;
    vertical-align: sub;        /* 第二張圖片設定 sub */
  }
  .a {vertical-align: baseline;}
  .b {vertical-align: sub;}
  .c {vertical-align: super;}
  .d {vertical-align: super;}   /* 兩張圖片中的文字設定 super */
</style>

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

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

top 和 bottom 使用後會對齊「父元素」的上方或下方，如果有較大的子元素撐開了父元素，則可以將其他子元素一併對齊。

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="d">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {
    width: 200px;
    vertical-align: top;
  }
  .img2{
    width: 40px;
    vertical-align: bottom;
  }
  .a {vertical-align: top;}
  .b {
    font-size: 30px;
    vertical-align: bottom;
  }
  .c {
    font-size: 20px;
    vertical-align: top;
  }
  .d { vertical-align: top;}
</style>

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

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

text-top 和 text-bottom 使用後會對齊「文字」的上方或下方。

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

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="d">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {
    width: 200px;
    vertical-align: text-top;
  }
  .img2{
    width: 40px;
    vertical-align: text-top;
  }
  .a {vertical-align: text-top;}
  .b {
    font-size: 30px;
    vertical-align: text-top;
  }
  .c {
    font-size: 20px;
    vertical-align: text-top;
  }
  .d {vertical-align: text-top;}
</style>

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

vertical-align: 長度

使用「長度」作為垂直對齊的屬性後，會將所設定的元素，從 baseline 為基礎提升或減少對應的長度數值，如果使用 px 則為絕對長度單位，使用 em 為單位則會乘以元素字體的尺寸。

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="d">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
  }
  .img1 {
    width: 200px;
    vertical-align: baseline;
  }
  .img2{
    width: 40px;
    vertical-align: -30px;    /* 從基準線往下降 30px  */
  }
  .a {
    vertical-align: baseline;
  }
  .b {
    font-size: 30px;
    vertical-align: 30px;     /* 從基準線往上升 30px  */
  }
  .c {
    font-size: 20px;
    vertical-align: -1.5em;  /* 從基準線往下降 20px x 1.5 = 30px  */
  }
  .d {
    vertical-align: 30px;    /* 從基準線往上升 30px  */
  }
</style>

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

vertical-align: 百分比

使用「百分比」作為垂直對齊的屬性後，會將所設定的元素，從 baseline 為基礎提升或減少「行高的百分比」，如果是圖片等沒有行高的元素，會使用繼承於父元素的行高。

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

<!-- HTML 程式碼 -->
<div>
  <span class="a">Oxxo go!!</span>
  <span class="b">middle</span>
</div>
<div>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img1">
  <span class="d">Oxxo go!!</span>
  <img src="https://www.oxxostudio.tw/img/articles/201405/about-me.jpg" class="img2">
</div>

<!-- CSS 程式碼 -->
<style>
  div {
    border: 1px solid #000;
    padding: 0;
    margin: 10px;
    width: max-content;
    line-height: 100px;
  }
  span {
    font-size: 60px;
    background: #ddd;
    font-family: Impact;
    line-height: 1.2;    /* 60px x 1.2 = 72px */
  }
  input{
    vertical-align: text-bottom;
  }
  .img1 {
    width: 200px;
    vertical-align: baseline;
  }
  .img2{
    width: 40px;
    vertical-align: 100%;     /* 100px x 100% = 100px */
  }
  .a {
    vertical-align: baseline;
  }
  .b {
    font-size: 30px;
    vertical-align: 100%;     /* 72px x 100% = 72px */
  }
  .c {
    font-size: 20px;
    line-height: 2;           /* 20px x 2 = 40px */
    vertical-align: -100%;    /* 40px x -100% = -40px */
  }
  .d {
    vertical-align: 50%;      /* 72px x 100% = 72px */
  }
</style>

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

小結

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

意見回饋

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

文字水平對齊、垂直對齊

text-align 水平對齊

text-align-last 最後一行對齊

vertical-align 垂直對齊

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

vertical-align: middle 垂直對齊中線

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

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

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

vertical-align: 長度

vertical-align: 百分比

小結

意見回饋

CSS 教學

基本介紹

CSS 選擇器

數值與單位

變數與內容函式

顏色與濾鏡

文字樣式

元素容器

背景與陰影

清單與表格

基本排版與定位

Flexbox 彈性排版

Grid 網格排版

轉場與動畫

變形、裁切與遮罩