旗標知識網 Banner Advertisement
     
 
最新 HTML & CSS 網頁程式設計
最新 HTML & CSS 網頁程式設計

作者:施威銘研究室著
書號:F6462
附件:附1片光碟片
定價:520 元
 
 
 
 
 
 
 
使用 CSS 設定文字或圖片在垂直方向的對齊方式

使用 CSS 設定文字或圖片在垂直方向的對齊方式

CSS 的 vertical-align 屬性是用來設定文字或圖片在垂直方向的對齊方式, 其語法如下:

vertical-align:屬性值

常用的屬性值如下表:

屬性值 說明
top 緊靠顯示區域之上緣對齊
text-top 緊靠上一層標籤所包含的文字之上緣對齊
bottom 緊靠顯示區域之下緣對齊
text-bottom 緊靠上一層標籤所包含的文字之下緣對齊
middle 緊靠上一層標籤所包含的文字之中線對齊 super 將文字設為上標字
sub 將文字設為下標字

TIP..在上表的 6 個屬性值, 只有『top』與『bottom』適用於表格內的儲存格, 其它都不適用於表格內的儲存格。

這裡出現了一個新名詞-『顯示區域』, 我們必須先瞭解它所代表的意義, 才容易區分各個屬性值的差異。
當我們寫信的時候, 通常不會將整張信紙寫得滿滿的, 而是讓內容與信紙邊緣留一些空白, 以利於閱讀。同理, 瀏覽器顯示網頁時也並未用盡全部的範圍, 實際用來顯示文字或圖形的這塊區域便稱為『顯示區域』, 如下圖的斜線區域:

上緣對齊-top 或 text-top

top 與 text-top 雖然都是靠上緣對齊, 但是兩者最大的差異在於『對齊基準線』的不同。top 是以『顯示區域上緣』為對齊基準線;而 text-top 則是以『上一層標籤所包含的文字之上緣』為對齊基準線。坊間有些書籍或文件說它們的功能一樣, 實為謬誤。我們看以下的例子就會明白:


<style>
.s1 {vertical-align:top}
.s2 {vertical-align:text-top}
</style>

<body style=font-family:華康少女文字w8>
<p style=font-size:72px>
陽光
<span class=s1 style=font-size:32px>沙灘</span>
<img src=beach.jpg alt=前濱海灘>
</p>
<p class=s2 style=font-size:72px>
陽光
<span style=font-size:32px>沙灘</span>
<img src=beach.jpg alt=前濱海灘>
</p>


對齊顯示區域的上緣

對『沙灘』而言, 『陽光』是上層標籤<p>所包含的文字, 所以對齊『陽光』的上緣

下緣對齊-bottom 或 text-bottom

bottom 與 text-bottom 都是靠下緣對齊, 兩者最大的差異, 如同 top 和 text-top, 也是在於『對齊基準線』的不同。bottom 是以『顯示區域下緣』為對齊基準線;而 bottom-top 則是以『上一層標籤所包含的文字之下緣』為對齊基準線, 兩者當然不會相同:

<style>
.s1 {vertical-align:bottom}
.s2 {vertical-align:text-bottom}
</style>

<body style=font-family:華康少女文字w8>
<p style=font-size:72px>
陽光
<span class=s1 style=font-size:32px>沙灘</span>
<img src=beach.jpg alt=前濱海灘></p>

<p class=s2 style=font-size:72px>
陽光
<span style=font-size:32px>沙灘</span>
<img src=beach.jpg alt=前濱海灘>
</p>


對齊顯示區域的下緣
對『沙灘』而言,『陽光』是上層標籤<p>所包含的文字,所以對齊『陽光』的下緣

靠文字中線對齊-middle

middle 的意義和 text-top 或 text-bottom 相似, 不過它是以『上一層標籤所包含的文字之中線』為對齊基準線:

<style>
.s1 {vertical-align:middle}
</style>

<body style=font-family:華康少女文字w8>
<p style=font-size:120px>
陽光
<span class=s1 style=font-size:32px>沙灘</span>
<img src=beach.jpg></p>


『陽光』是上層標籤<p>所包含的文字, 所以『沙灘』對齊『陽光』的中線

設為上標字-super

利用 super 可將文字設為『上標字』, 而『上標字』最常見到的用途, 是用來表示『平方』、『三次方』、『四次方』等等, 範例如下:

<style>
.s1 {vertical-align:super}
</style>


<body style=font-size:64px background=bg15.jpg>

X<span class=s1>2</span>+Y<span class=s1>2</span>=Z<span class=s1>
2</span>


上標字會靠上顯示

設為下標字-sub

利用 sub 可將文字設為『下標字』 , 而『下標字』通常出現在數學多項式、方程式等等場合, 範例如下:


<style>
.s2 {vertical-align:sub}
</style>

<body style=font-size:64px background=bg15.jpg>

F(X<span class=s2>1</span>,X<span class=s2>2</span>)=
5X<span class=s2>1</span>+2X<span class=s2>2</span>


下標字會靠下顯示


 
Down Logo 旗 標 出 版 股 份 有 限 公 司   100 台北市中正區杭州南路一段15-1號19樓 TEL: 02-2396-3257
Copyright © 2005 Flag Publishing Co.,Ltd. All Rights Reserved    版權所有聯絡我們合作提案隱私權政策
 
現在購買《DSLR 完全探索》《數位相片編修聖經》《數位列印/輸出聖經》《數位相機Raw檔聖經》四書,超值優惠2299元 下載訂購單