1. Web
  2. CSS
  3. vertical-align

vertical-align

Baseline 已廣泛支援

此特性已相當成熟，可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來，各瀏覽器均已提供此特性。

vertical-align CSS 屬性設定內聯、內聯塊或表格單元格框的垂直對齊方式。

試一試

vertical-align: baseline;

vertical-align: top;

vertical-align: middle;

vertical-align: bottom;

vertical-align: sub;

vertical-align: text-top;

<section class="default-example" id="default-example">
  <p>
    Align the star:
    <img id="example-element" src="/shared-assets/images/examples/star2.png" />
  </p>
</section>

#default-example > p {
  line-height: 3em;
  font-family: monospace;
  font-size: 1.2em;
  text-decoration: underline overline;
}

vertical-align 屬性可在兩種情況下使用：

請注意，vertical-align 僅適用於內聯、內聯塊和表格單元格元素：你不能使用它來垂直對齊塊級元素。

語法

css
/* Keyword values */
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/* <length> values */
vertical-align: 10em;
vertical-align: 4px;

/* <percentage> values */
vertical-align: 20%;

/* Global values */
vertical-align: inherit;
vertical-align: initial;
vertical-align: revert;
vertical-align: revert-layer;
vertical-align: unset;

vertical-align 屬性被指定為下列值之一。

內聯元素的值

父級相對值

這些值將元素相對於其父元素進行垂直對齊

baseline

將元素的基線與其父元素的基線對齊。某些替換元素的基線（如<textarea>）未由 HTML 規範指定，這意味著它們使用此關鍵字的行為在不同瀏覽器之間可能有所不同。

sub

將元素的基線與其父元素的下標基線對齊。

super

將元素的基線與其父元素的上標基線對齊。

text-top

將元素的頂部與其父元素字型的頂部對齊。

text-bottom

將元素的底部與其父元素字型的底部對齊。

middle

將元素的中間與其父元素的基線加上一半 x-height 對齊。

<length>

將元素的基線對齊到其父元素基線上方給定的長度。允許負值。

<percentage>

將元素的基線對齊到其父元素基線上方給定的百分比，該值是line-height屬性的百分比。允許負值。

行相對值

以下值將元素相對於整行垂直對齊

top

將元素及其後代的頂部與整行的頂部對齊。

bottom

將元素及其後代的底部與整行的底部對齊。

對於沒有基線的元素，則使用底部外邊距邊緣代替。

表格單元格的值

baseline（和 sub、super、text-top、text-bottom、<length> 以及 <percentage>）

將單元格的基線與同一行中所有其他基線對齊的單元格的基線對齊。

top

將單元格的頂部內邊距邊緣與行的頂部對齊。

middle

將單元格的內邊距框在行內居中。

bottom

將單元格的底部內邊距邊緣與行的底部對齊。

允許負值。

正式定義

初始值baseline
應用於內聯級和表格單元格元素。它也適用於::first-letter和::first-line。
繼承性否
百分比指元素自身的line-height
計算值對於百分比和長度值，為絕對長度，否則為指定的關鍵字。
動畫型別一個長度

正式語法

vertical-align = 
  [ first | last ]        ||
  <'alignment-baseline'>  ||
  <'baseline-shift'>      

<alignment-baseline> = 
  baseline      |
  text-bottom   |
  alphabetic    |
  ideographic   |
  middle        |
  central       |
  mathematical  |
  text-top      

<baseline-shift> = 
  <length-percentage>  |
  sub                  |
  super                |
  top                  |
  center               |
  bottom               

<length-percentage> = 
  <length>      |
  <percentage>

示例

基本示例

HTML

html
<div>
  An <img src="frame_image.svg" alt="link" width="32" height="32" /> image with
  a default alignment.
</div>
<div>
  An
  <img class="top" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-top alignment.
</div>
<div>
  An
  <img class="bottom" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a text-bottom alignment.
</div>
<div>
  An
  <img class="middle" src="frame_image.svg" alt="link" width="32" height="32" />
  image with a middle alignment.
</div>

CSS

css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}

結果

行框中的垂直對齊

HTML

html
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>

結果

表格單元格中的垂直對齊

在此示例中，我們有一個包含六個單元格的單行表格。該行將 vertical-align 設定為預設值 bottom。

  • 前四個單元格各自設定自己的 vertical-align 值，這些值會覆蓋行的值。
  • 第五個單元格未設定任何 vertical-align 值，因此繼承了行的值。

第六個單元格僅用於確保單元格足夠高以顯示效果。

HTML

html
<table>
  <tr class="bottom">
    <td class="baseline">baseline</td>
    <td class="top">top</td>
    <td class="middle">middle</td>
    <td>bottom</td>
    <td>Row's style</td>
    <td>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
      pretium felis eu sem mattis vulputate.
    </td>
  </tr>
</table>

CSS

css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}

.bottom {
  vertical-align: bottom;
}

.baseline {
  vertical-align: baseline;
}

.top {
  vertical-align: top;
}

.middle {
  vertical-align: middle;
}

結果

規範

規範
CSS 內聯佈局模組級別 3
# propdef-vertical-align

瀏覽器相容性

另見

幫助改進 MDN

瞭解如何貢獻

此頁面由MDN 貢獻者於修改。

在 GitHub 上檢視此頁面 • 報告此內容的問題
© . Content available under a Creative Commons license.