CSS：修訂版本之間的差異

2015年7月3日 (五) 14:04的修訂版本

Cascading Style Sheets(串接樣式表)

語法

表格(table)

文件

文字垂直置中

設定行高 ( line-height )

適用於「單行」的「行內元素」 ( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div，若將 line-height 設成和高度一樣的數值，則內容的行內元素就會被垂直置中，因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。

Div設 height 、 line-height 設同值，文字自然會垂直置中
- <DIV style='width:200px;height:100px;line-height:100px;background:#C7FF91;text-align:center;'>
  測試文字垂直置中
  </DIV>
- 測試文字垂直置中
外層 Div 的 height 、 line-height 設不同值，並不會置中
- <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 雖然是垂直置中，不過卻是指在外框內的所有元素垂直位置互相置中，並不是相對於外框的高度垂直置中。

<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%，那麼其他的方塊就會真正的垂直置中。

<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 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>

@@ 第 33 行： / 第 33 行： @@
 #<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>
-<style>
-.div0::before{content:'';width:0;height:100%;display:inline-block;position:relative;vertical-align:middle;background:#f00;}
-</style>
 #&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 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>