iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 14
1
自我挑戰組

迷路的前端工程系列 第 14

第十四日:置中

  • 分享至 

  • xImage
  •  

第十三日回顧:
在昨天,我們介紹了有關於網頁流向的相關資訊,其中比較有趣的就是 position:fixed 屬性了,他可以配合 a 標籤來實現回到頂部的功能,這邊補充一下, a 標籤除了可以連結外部網站以外也可以透過其他標籤的 id 來跳轉過去該標籤的位置,是不是很方便呢~馬上進入今天的主題,置中

置中的方法有非常多種,其中又分為水平置中以及垂直置中,以目前我使用到的有三種方法,當然,也許有更多種,這就要靠大家發現囉

1.text-align: 此屬性可以決定你在父元素的水平位置,特別強調是在父元素內,因此若使用上出現問題不妨先查看父元素的寬度是否有設定
2.相對定位 + margin: 首先呢,我們會透過絕對定位來將需要置中的內容左以及上設置到 50% 的位置,而後在透過 margin-top 和 margin-left 將位置偏移到自身長、寬的一半位置,這樣就可以在畫面中置中了
3.Flex 屬性:我們也可以透過更改元素屬性來進行排版,不過由於 Flex 的篇幅稍微大了些因此今天就不多以描述了

好啦,今天就先介紹如何將元素置中,至於其他內容就讓我們在更多的明天繼續擠出來吧

小抱怨專區:
中秋連假結束了,好沒有感覺啊...三天就這樣消失了


上一篇
第十三日:定位
下一篇
第十五日:前後端是什麼
系列文
迷路的前端工程16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言