iT邦幫忙

鐵人檔案

2019 iT 邦幫忙鐵人賽
回列表
Modern Web

連續30天的超實務網頁設計的垂直置中教學 系列

網頁設計中最常被問到的就是如何做到版面的垂直置中了,雖然這是100%會在網頁設計時遇到的問題,但仍舊有許多的設計師被打敗在設計的路上,這次就讓我們每天一篇來學習各式各樣的網頁垂直置中技巧吧。

鐵人鍊成 | 共 30 篇文章 | 113 人訂閱 訂閱系列文 RSS系列文
DAY 21

使用相對定位 Relative + translateY 來做垂直置中

簡言 這個技巧利用了 Top: 50% 的招式,讓你的物件上方能產生固定%數的距離,接著讓要置中的物件本身使用 tranlateY 的%數來達成垂直置中的需求,...

2018-11-05 ‧ 由 CSScoke 分享
DAY 22

使用 Padding 來做垂直置中啦

簡言 「什麼!這也算垂直置中技巧?連我阿嬤都知道這方式吧?!!」 對的!這的確也算是一種垂直置中的方式,不可諱言的這方式真的是簡單過頭了,以至於有些開發者認為這...

2018-11-06 ‧ 由 CSScoke 分享
DAY 23

使用 Writing-mode 來做垂直置中區塊

簡言 這個方式應該是比較少見到有人使用的了,這個想法是被老友 Paul 所激發的,writing-mode 這個 CSS屬性的功能基本上跟垂直置中是八竿子打不上...

2018-11-07 ‧ 由 CSScoke 分享
DAY 24

使用 table 來做垂直置中區塊

簡言 這個方式...沒甚麼好講的,就是一個很單純的用表格來做垂直置中,應該算是初初初初初級垂直置中技巧啦。 原理說明 去看這篇 使用 Display: tabl...

2018-11-08 ‧ 由 CSScoke 分享
DAY 25

使用 flex + before + after + flex-grow 來做垂直置中區塊

簡言 這個方式跟之前的一個方式很相似,但只是利用上下包夾的偽元素包夾我們的內容物件來達成垂直置中的目的。 原理說明 使用 Flex 的時候我們可以利用 flex...

2018-11-09 ‧ 由 CSScoke 分享
DAY 26

IE8以上的網頁我該如何做垂直置中?

講了這麼多垂直置中... 從一開始鐵人賽開賽以來,Amos寫了 25種這麼多的垂直置中技巧,但或許仍舊有人搞不懂這 25種垂直置中方式的使用時機,今天我們就來看...

2018-11-10 ‧ 由 CSScoke 分享
DAY 27

RWD網頁等比例的區塊,我該如何選擇垂直置中的方式?

RWD等比例 目前RWD網頁應該是個再普通不過的需求了,這樣的需求在製作網頁時到底怎麼做到垂直置中的需求呢? 基本上我們當然先從等比例區塊這裡先處裡啦,等比例區...

2018-11-11 ‧ 由 CSScoke 分享
DAY 28

左圖右文版面,文字垂直置中的方式?

支援度最高的垂直置中方式 左圖右文版面的垂直置中應該是最常見到的一種需求了,這種需求的重點在於右側的文字需要垂置對齊於左邊的圖片,這種畫面基本上通常在樣版網站可...

2018-11-12 ‧ 由 CSScoke 分享
DAY 29

蓋版廣告的垂直置中技巧跟支援

數位生態 蓋板廣告太常見到了,目前幾乎人手多機的情況下,我們每天幾乎都離不開上網這行為,上網除了上班用電腦以外,幾乎都是用行動裝置上網了,也就經常會看到蓋版廣告...

2018-11-13 ‧ 由 CSScoke 分享
DAY 30

Amos除了這超過25種垂直置中外還有別的方式嗎?

老實說 Amos 從一開始寫垂直置中系列開始也想不到今天可以寫出 25種垂直置中技巧,其實鐵人賽寫到今天為止其實也生出了超過25種垂直置中的方式,只是有些概念頗...

2018-11-14 ‧ 由 CSScoke 分享