檢視 CSS 的原始碼

[[分類:HTML]]
Cascading Style Sheets(串接樣式表)
==語法==
===表格(table)===
*[http://css-teach.7happy.com.tw/css-table.php 文件]
===文字垂直置中===
====設定行高 ( line-height )====
適用於「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div，若將 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中， 因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。
#Div設 height 、 line-height 設同值，文字自然會垂直置中
#*&lt;DIV style='width:200px;height:100px;line-height:100px;background:#C7FF91;text-align:center;'&gt;<br/>測試文字垂直置中<br/>&lt;/DIV&gt;
#*<DIV style='width:200px;height:100px;line-height:100px;background-color:#C7FF91;text-align:center;'>測試文字垂直置中</DIV>
#外層 Div 的 height 、 line-height 設不同值，並不會置中
#*&lt;Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='display:inline-block;width:30px;height:30px;background:#c00;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#*<div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'><div style='display:inline-block;width:30px;height:30px;background:#c00;'></div></div>

====vertical-align====
#vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果
#*諸參數
#*#baseline：基礎線，約在文字的中間位置
#*#sub：下標
#*#super：上標
#*#top：該行元素的最高處
#*#text-top：該行文字的最高處
#*#middle：置中
#*#bottom：該行元素的最低處
#*#text-bottom：該行文字的最低處
#*#百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值