CSS:修訂版本之間的差異
出自六年制學程
(→文字垂直置中) |
(→文字垂直置中) |
||
第 6 行: | 第 6 行: | ||
===文字垂直置中=== | ===文字垂直置中=== | ||
#Div設 height 、 line-height 設同值,文字自然會垂直置中 | #Div設 height 、 line-height 設同值,文字自然會垂直置中 | ||
− | #*<DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'><br/> | + | #*<DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'><br/>測試文字垂直置中<br/></DIV> |
− | #*<DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'> | + | #*<DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>測試文字垂直置中</DIV> |
+ | #vertical-align 垂直方向的對齊,用於「圖照」或「表格欄位內的文字」垂直對齊效果 | ||
+ | #*諸參數 | ||
+ | #*#baseline:基礎線,約在文字的中間位置 | ||
+ | #*#sub:下標 | ||
+ | #*#super:上標 | ||
+ | #*#top:該行元素的最高處 | ||
+ | #*#text-top:該行文字的最高處 | ||
+ | #*#middle:置中 | ||
+ | #*#bottom:該行元素的最低處 | ||
+ | #*#text-bottom:該行文字的最低處 | ||
+ | #*#百分比(%):以百分比來讓圖片垂直對齊該行文字,可以有負值 |
2015年6月29日 (一) 17:07的修訂版本
Cascading Style Sheets(串接樣式表)
語法
表格(table)
文字垂直置中
- Div設 height 、 line-height 設同值,文字自然會垂直置中
- <DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>
測試文字垂直置中
</DIV> - 測試文字垂直置中
- <DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>
- vertical-align 垂直方向的對齊,用於「圖照」或「表格欄位內的文字」垂直對齊效果
- 諸參數
- baseline:基礎線,約在文字的中間位置
- sub:下標
- super:上標
- top:該行元素的最高處
- text-top:該行文字的最高處
- middle:置中
- bottom:該行元素的最低處
- text-bottom:該行文字的最低處
- 百分比(%):以百分比來讓圖片垂直對齊該行文字,可以有負值
- 諸參數