CSS:修訂版本之間的差異

出自六年制學程
跳轉到: 導覽搜尋
文字垂直置中
(七)flexbox CSS3
第 95 行: 第 95 行:
  
 
====(七)flexbox CSS3====
 
====(七)flexbox CSS3====
 +
 +
 +
<Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'>
 +
<Div style='width:100px;height:50px;background:#099;'></div>
 +
</Div>

2015年7月4日 (六) 11:29的修訂版本

Cascading Style Sheets(串接樣式表)

語法

特殊字元

  1. &nbsp;:空格,但不是值爲32(十六進制20),是值160(十六進制A0)
  2. &#9;:TAB,只在<PRE>...</PREgt;之間有效
  3. &#10;:換行,只在<PRE>...</PREgt;之間有效

表格(table)

display

  • display:block:區塊,元素會以區塊方式呈現,除非設定 position 或 float。
    1. 可以設定高度(height)、寬度(width)、上方與下方距離
    2. div、p、ul、li 均屬 block。
  • display:inline:所有文字或圖片均不換行,也就是全部都會是同一行的意思。
    1. 高度與寬度都不能設定,文字或圖片所佔的寬度就是他的寬度
    2. span、a、input、img、em 均屬 inline。
  • display:table-cell:假裝表格,其中的子元素可以輕易垂直置中

範例一:

  1. <div style= 'display:block'>元素一</div>
    <div style= 'display:block'>元素二</div>
  2. 元素一
    元素二

範例二:

  1. <div style= 'display:inline'>元素一</div>
    <div style= 'display:inline'>元素二</div>
  2. 元素一
    元素二

水平置中

  1. 母元素 text-align:center 子元素的 display 為 inline、inline-block
  2. 母子元素均為 block ,第一個子元素設 float:left;margin-left:calc(50% - 適當值px); ,calc()中的減號前後都要有空白

垂直置中

(一)設定行高 ( line-height )

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

範例一:Div設 height 、 line-height 設同值,文字自然會垂直置中

  1. <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
    測試文字垂直置中
    </DIV>
  2. 測試文字垂直置中

範例二:外層 Div 的 height 、 line-height 設不同值,並不會置中

  1. <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 垂直方向的對齊,用於「圖照」或「表格欄位內的文字」垂直對齊效果,諸參數:

  1. baseline:基礎線,約在文字的中間位置
  2. sub:下標
  3. super:上標
  4. top:該行元素的最高處
  5. text-top:該行文字的最高處
  6. middle:置中
  7. bottom:該行元素的最低處
  8. text-bottom:該行文字的最低處
  9. 百分比(%):以百分比來讓圖片垂直對齊該行文字,可以有負值

vertical-align:middle 雖然是垂直置中,不過卻是指在外框內的所有元素垂直位置互相置中,並不是相對於外框的高度垂直置中。

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

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

但是:

  1. 我們總不能每次要垂直置中,都要添加一個奇怪的 div 在裏頭
  2. 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內,
  3. 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
  4. 偽 div 的 display 須為 inline-block,畢竟 vertical-align:middle; 是針對行內元素

依上述要領實作如下,添置偽元素 ::before :

  1. .div0::before{
    width:0;content:'';
    vertical-align:middle;height:100%;
    display:inline-block;position:relative;
    }

(三)動態計算

不是處處都能用 inline-block,block也可使用 top 樣式來垂直置中,其值為 calc(50% - 半高px):

  1. calc 為動態計算,50% 代表母元素高度之半,「-」是減號,前後都必須是空白,再減去自身高度之半。
  2. 自身元素的 position 必須為 relative,不然 top 失去作用
  3. 只能用 top 不能用 margin-top ,因為 margin-top 的 50% 代表的是母元素的寬度之半。
  4. float:left;是各相鄰區塊向左漂移靠攏;第一個區塊取適當的左距。

依以上要領實作如下:

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

(四)假裝表格

td 中下一行 vertical-align:middle 就可以垂直置中,而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ,其子元素就會置中。

  1. <Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
    假表格垂直置中
    </Div>
  2. 假表格垂直置中

(五)margin:auto

母元素設 position:relative; ,子元素設 position:absolute;margin:auto;自動置中

  1. <Div style='position:relative;width:200px;height:100px;border:1px solid #000;'>
    	<div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div>
    </Div>

(六)垂直位移 CSS3

CSS3可以使用transform樣式,對子元素做如下操作:

  1. 用 top:50%; 下降母元素的 50% 。
  2. 用 transform:translateY(-50%) 上升子元素的 50% , transform 管位移、旋轉、變形, translateY 為垂直位移
  3. position:relative

依以上要領實作如下:

  1. <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
    <div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'></div>
    </Div>

(七)flexbox CSS3