CSS:修訂版本之間的差異
出自六年制學程
(→(三)動態計算) |
(→(三)動態計算) |
||
第 43 行: | 第 43 行: | ||
====(三)動態計算==== | ====(三)動態計算==== | ||
− | <Div style='width:200px;height: | + | <Div style='width:200px;height:200px;border:1px solid #000;'> |
− | <div style='width:30px;height:30px;background:#c00;float:left;top:calc(50% - 15px);margin-left:calc(50% - 45px);'></div> | + | <div style='width:30px;height:30px;background:#c00;float:left;margin-top:calc(50% - 15px);margin-left:calc(50% - 45px);'></div> |
<div style='width:30px;height:60px;background:#0c0;float:left;margin-top:calc(50% - 30px);'></div> | <div style='width:30px;height:60px;background:#0c0;float:left;margin-top:calc(50% - 30px);'></div> | ||
<div style='width:30px;height:40px;background:#00f;float:left;margin-top:calc(50% - 20px);'></div> | <div style='width:30px;height:40px;background:#00f;float:left;margin-top:calc(50% - 20px);'></div> | ||
</Div> | </Div> |
2015年7月3日 (五) 15:05的修訂版本
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 style='width:200px;height:100px;line-height:100px;background:#C7FF91;text-align:center;'>
- 外層 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>
- <Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
(二)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 在裏頭
- 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內,
- 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
- 偽 div 的 display 須為 inline-block,畢竟 vertical-align:middle; 是針對行內元素
依上述要領實作如下,添置偽元素 ::before :
- .div0::before{
width:0;content:'';
vertical-align:middle;height:100%;
display:inline-block;position:relative;
}