iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
自我挑戰組

蚵蚵攻城記系列 第 8

[Day08] 垂直置中 (2/4)

昨天嘗試了用line-height來做到垂直置中,
今天試試看用position來達到垂直置中的效果。
照慣例還是請到阿鼠,
阿鼠
阿鼠臉太大。

我們把阿鼠放到一個籠子裡,

<div class="animalCage">
    <img class="rat" src="https://drive.google.com/uc?id=1fcd_Kd1kO6Oklsesi8G-zuHm40KOSKuX" height=200px>
</div>
.animalCage {
  background-color : #00aa00;
  height: 519px;
  width: 300px;
  border: 3px solid;
}

Cage
鼠鼠很緊張,躲到籠子的角落了。

先打造一個舒適的環境給鼠鼠,
將我們的籠子(父元素) 的position指定為relative

position: relative;

(再把阿鼠打個麻醉,)

position: absolute;

這樣想把阿鼠放哪裡就放哪裡囉!

top: 0;
bottom: 0;
left: 0;
right:0 ;
margin: auto;

阿鼠就躺在正中間囉!!!
lay


如果指定position: absolute,會相對於父元素定位,
接著四個propertytopbottomrightleft
分別代表了與四個方向邊界的距離,
一開始會在top: 0; left: 0;的位置,
如果將兩個相對的位置都設定為0,
就會有置中的效果。

top: 0;
bottom: 0;

top0bottoom0

left: 0;
right:0 ;

l0r0
所以我們把四個property都設定為 0
就可以置中囉!

阿鼠其實很可愛對吧??


上一篇
[Day07] 垂直置中 (1/4)
下一篇
[Day09] 垂直置中(3/4)
系列文
蚵蚵攻城記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

我要留言

立即登入留言