CSS：修訂版本之間的差異
出自六年制學程
（→文字垂直置中） |
（→設定行高 ( line-height )） |
||
| 第 10 行： | 第 10 行： | ||
#*<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;'><br/>測試文字垂直置中<br/></DIV> | ||
#*<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;'>測試文字垂直置中</DIV> | ||
| + | #* | ||
| + | #*<div style='width:200px;height:150px;border:1px solid #000;line-height:200px;text-align:center;'> | ||
| + | <div style='display:inline-block;width:30px;height:30px;background:#c00;'> | ||
| + | </div></div> | ||
| + | |||
====vertical-align==== | ====vertical-align==== | ||
#vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果 | #vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果 | ||
2015年7月3日 (五) 11:18的修訂版本
Cascading Style Sheets(串接樣式表)
語法
表格(table)
文字垂直置中
設定行高 ( line-height )
適用於「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div，若將 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中， 因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。
- Div設 height 、 line-height 設同值，文字自然會垂直置中
- <DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>
測試文字垂直置中
</DIV> - 測試文字垂直置中
vertical-align
- vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果
- 諸參數
- baseline：基礎線，約在文字的中間位置
- sub：下標
- super：上標
- top：該行元素的最高處
- text-top：該行文字的最高處
- middle：置中
- bottom：該行元素的最低處
- text-bottom：該行文字的最低處
- 百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值
- 諸參數
- vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果
- <DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>
