文字水平与垂直对齐

透过网页呈现文字时，常需要让文字进行“对齐”，这篇教学会介绍使用使用 CSS 的 text-align、text-align-last 和 vertical-align 等样式，控制文字水平对齐、垂直对齐和最后一行对齐。

快速导览：

• text-align 水平对齐
• text-align-last 最后一行对齐
• vertical-align 垂直对齐
  • baseline 垂直对齐基准线
  • middle 垂直对齐中线
  • sub | super 垂直对齐下标、上标
  • top | bottom 垂直对齐上方、下方
  • text-top | text-bottom 垂直对齐内容区域上方、下方
  • 长度、百分比

教学影片

搭配教学影片一起阅读，效果会更好！欢迎大家订阅 STEAM 教育学习网的 Youtube 频道。

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

text-align 水平对齐

text-align 样式属性可以设定“行内容器元素 ( 通常是文字或图片 ) 水平对齐”( 注意，其他显示类型的元素不支援水平对齐 )，具有继承特性，下方列出相关属性值：

下方范例使用系统文字方向 ( 左到右 ) 的文字，透过 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>

如果是垂直书写的文字，则 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>

如果分不清楚 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>

text-align-last 最后一行对齐

text-align-last 样式属性可以设定“文字的最后一行对齐”，具有继承特性，text-align-last 的属性和 text-align 几乎相同。

使用时需要注意。最后一行是指“软换行”产生的最后一行 ( 文字长度超过单行限制而自动换行 )，如果使用“硬换行”产生的换行 ( 使用 <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>

除了硬换行和软换行的差异，如果文字只有“单一行”，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>

vertical-align 垂直对齐

vertical-align 样式属性可以设定“行内元素和表格元素”与“父元素行框参考线”的垂直对齐 ( 注意，其他显示类型的元素无法使用垂直对齐样式 )，没有继承特性，这些基准线会根据字体的不同而有所不同 ( 上标线和下标线通常由浏览器或操作系统定义 )。

参考：容器显示类型 ( display )、行内容器排版格式 ( IFC )

vertical-align: baseline 垂直对齐基准线

垂直对齐 baseline 是所有行内元素和表格垂直对齐的默认值，会对齐父元素行框的基准线 ( baseline )，通常会有下列几种情况：

• 注意，通常默认行高是 1.2，表示文字尺寸的 1.2 倍，但不同字体可能会有不同默认值。
• 如果元素里包含“文字”，就算使用 display 样式属性强制更换显示类型进行垂直对齐，仍然会以元素里“最后一行文字”的作为对齐的参考依据。

下方范例展示三种不同的情境，三个情境中的最左边的 div 展示父元素没有文字但仍然会产生行框，但文字尺寸仍然会影响行框高度，中间的 div 表示父元素有文字，最右边的粉红色 div 是 60px 高度的对照参考 ( 如果父元素文字尺寸 50px，行高 1.2 会等于 60px )，可以特别注意当子元素行高较大 ( 文字尺寸较大所以行高较大 ) 或出现高度较高图片的时候，就会发生行框高度被撑开的状况，虽然被行框撑开，但所有元素都会对齐父元素文字的 baseline，这也是为什么图片进行垂直置中对齐时，常常会出现底部空白空间的原因。

• 如果不希望子元素行高影响行框高度，可调降子元素行高数值，直到小于父元素行高。
• 线上展示：https://codepen.io/oxxo/pen/LYoOXEG

<!-- 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>

vertical-align: middle 垂直对齐中线

垂直对齐 middle 是“最容易搞错”的样式属性，表示用“子元素”的中线，去对齐父元素行框中“小写字母的中线”，因为是对齐小写字母中线，所以对齐时往往会发现“无法垂直置中”的状况 ( 因为不是子元素中线对齐行框中线 )，但如果子元素高度大于父元素，反而是父元素会发生移动，让子母中线去去对齐子元素中线，就会真正垂直置中，下方列出几种常见的状况：

下方范例展示四种不同的情境，情境中的最左边的 div 展示父元素没有文字但仍然会产生行框，但文字尺寸仍然会影响行框高度，中间的 div 表示父元素有文字，最右边的粉红色 div 是 120px 高度的对照参考 ( 如果父元素文字尺寸 100px，行高 1.2 会等于 120px )，可以特别注意当父元行高较大的时候，会发生子元素去对齐父元素小写字母中线，无法真正垂直置中。

• 如果不希望子元素行高影响行框高度，可调降子元素行高数值，直到小于父元素行高。
• 线上展示：https://codepen.io/oxxo/pen/JjqOeGY

<!-- 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>

因为 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>

vertical-align: sub | super 垂直对齐下标、上标

sub 和 super 使用后会将行内元素的“baseline 基准线”，对齐父元素行框文字的“上标线”和“下标线”，如果是图片、表格或表单元素，会使用底线作为 baseline 进行对齐，但因为对齐后子元素的行高可能会超过行框高度，可能会有下列几种情况：

注意，如果元素里包含“文字”，就算使用 display 样式属性强制更换显示类型进行垂直对齐，仍然会以元素里“最后一行文字”的作为“上标线”和“下标线”的参考依据。

下方范例会展示多种对齐 super 的状况，最后方的粉红 div 是行框原始高度的对照，可以特别观察对齐后撑开行框高度的元素 ( 由于对齐 sub 下标线的做法和对齐上标线完全相同，就只单纯展示上标线，可自行修改为 sub 观察对齐下标线效果 )。

• 如果不希望子元素行高影响行框高度，可调降子元素行高数值，直到小于父元素行高。
• 线上展示：https://codepen.io/oxxo/pen/oNRoQZY

<!-- 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>

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>

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>

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>

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>

小结

水平对齐和垂直对齐是排版中非常重要的技巧，只要熟练应用这篇教学所介绍的对齐样式和属性，就能轻松掌握排版对齐的方式。

意见反馈