檢視 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：該行文字的最低處
#百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值

vertical-align:middle 雖然是垂直置中，不過卻是指<b>在外框內的所有元素垂直位置互相置中</b>，並不是相對於外框的高度垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'><div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div></Div>
如果有一個方塊變成了高度 100%，那麼其他的方塊就會真正的垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'><div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div></Div>
但是：
#我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
#所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
#讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
#偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素
依上述要領實作如下，添置偽元素 ::before ：
#.div0::before{<br/>  width:0;content:<nowiki>''</nowiki>;<br/>  vertical-align:middle;height:100%;<br/>  display:inline-block;position:relative;<br/>}
#<Div class=div0 style='width:200px;height:100px;border:1px solid #000;text-align:center;'><div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div><div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div></Div>

====(三)動態計算====
使用top樣式，其值為 calc(50%&nbsp;-&nbsp;半高px)：
#calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
#自身元素的 position 必須為 relative，不然 top 失去作用
#只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
#float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。
依以上要領實作如下：
#&lt;Div style='width:200px;height:100px;border:1px solid #000;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50%&nbsp;-&nbsp;15px);float:left;margin-left:calc(50% - 45px);'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50%&nbsp;-&nbsp;30px);float:left;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50%&nbsp;-&nbsp;20px);float:left;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;<br/>
#<Div style='width:200px;height:100px;border:1px solid #000;'><div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div><div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div><div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div></Div>
====(四)假裝表格====