CSS:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
設定行高 ( line-height )
設定行高 ( line-height )
第 10 行: 第 10 行:
 
#*&lt;DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'&gt;<br/>測試文字垂直置中<br/>&lt;/DIV&gt;
 
#*&lt;DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'&gt;<br/>測試文字垂直置中<br/>&lt;/DIV&gt;
 
#*<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 的 height 、 line-height 設不同值
 +
#*&lt;div style='width:200px;height:150px;border:1px solid #000;line-height:200px;text-align:center;'&gt;<br>&lt;div style='display:inline-block;width:30px;height:30px;background:#c00;'&gt;&lt;/div&gt;&lt;/div&gt;
 
#*<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>
 
#*<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>
  

2015年7月3日 (五) 11:25的修訂版本

Cascading Style Sheets(串接樣式表)

語法

表格(table)

文字垂直置中

設定行高 ( line-height )

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

  1. Div設 height 、 line-height 設同值,文字自然會垂直置中
    • <DIV style='background-color:#C7FF91;width:300px;height:100px;text-align:center;line-height:100px;'>
      測試文字垂直置中
      </DIV>
    • 測試文字垂直置中
  2. 外層 Div 的 height 、 line-height 設不同值
    • <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

  1. vertical-align 垂直方向的對齊,用於「圖照」或「表格欄位內的文字」垂直對齊效果
    • 諸參數
      1. baseline:基礎線,約在文字的中間位置
      2. sub:下標
      3. super:上標
      4. top:該行元素的最高處
      5. text-top:該行文字的最高處
      6. middle:置中
      7. bottom:該行元素的最低處
      8. text-bottom:該行文字的最低處
      9. 百分比(%):以百分比來讓圖片垂直對齊該行文字,可以有負值