up
down
Close
架站盒子
Web Development Box
 

CSS 讓行內元素垂直置中或置頂、置底的方法

│ 10886 Views │ CSS
CSS 讓行內元素垂直置中或置頂、置底的方法
CSS 讓行內元素垂直置中或置頂、置底的方法

CSS 的vertical-align可以控制行內元素的對齊方式,「vertical」是垂直的意思,「align」則是對齊的意思,如置頂、置中或置底,除了行內元素(inline)之外也可以控制表格(table)的對齊方式。

如果要控制 div 的垂直對齊方式,請參考:CSS 區塊元素(div)垂直置中的方法

範例

vertical-align: top; vertical-align: middle; vertical-align: bottom; vertical-align: baseline; vertical-align: sub; vertical-align: text-top; vertical-align: text-bottom; vertical-align: super;

CSS + HTML


<style>
.span{
vertical-align: super;
}
</style>
<p>這是一行 p 元素的文字: <span class="span">這是要控制垂直對齊的元素</span></p>

呈現結果

這是一行 p 元素的文字: 這是要控制垂直對齊的元素

要留意這只能控制行內元素(inline)或表單(table),如果是區塊元素(block)則無效。


<style>
.div{
vertical-align: super;
}
</style>
<p>這是一行 p 元素的文字: <div class="div">這是要控制垂直對齊的元素</div></p>

呈現結果

這是一行 p 元素的文字:
這是要控制垂直對齊的元素

↑ 因為是區塊元素因此換行了。

表格效果

這是一段很長的文字,為了讓句子長一點先說一點廢話在這裡,架站盒子是由一個路人寫的,網址kumo是雲還是蜘蛛只有站長自己知道,我想寫到這裡應該就差不多了,來看看右邊的範例位置吧。 top middle bottom

只要將td加上vertical-align就可以控制文字垂直對齊了。

屬性列表

除了topbottom等關鍵值之外,也可以使用數值或百分比,以下列舉所有相關的值。

  • vertical-align: top; // 元素頂部與整體頂部對齊
  • vertical-align: middle; // 元素中部與父元素基線加上父元素高度的一半。
  • vertical-align: bottom; // 元素底部與整體底部對齊
  • vertical-align: baseline; // 元素基線與父元素基線對齊
  • vertical-align: sub; // 元素基線與父元素的下標基線對齊
  • vertical-align: super; // 元素基線與父元素的上標基線對齊
  • vertical-align: text-top; // 元素頂部與父元素字體頂部對齊
  • vertical-align: text-bottom; // 元素底部與父元素字體底部對齊
  • vertical-align: 2em; // 元素基線對齊到父元素基線的指定長度,可為負數
  • vertical-align: 10px; // 元素基線對齊到父元素基線的指定長度,可為負數
  • vertical-align: 50%; // 元素基線對齊到父元素基線的百分比,可為負數

延伸閱讀

本文是否對您有幫助?