iT邦幫忙

鐵人檔案

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

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

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

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

使用 Flex + align-content 來製作垂直置中

簡言 在正常的狀況下,align-conent 僅能對次軸多行 flex item 做置中,但是當我今天子層物件不確定有多少個時,且有時可能會有單個的情況出現的...

2018-10-26 ‧ 由 CSScoke 分享
DAY 12

使用 Grid + template 做垂直置中

簡言 CSS grid 最令人驚豔的就是這個 template 的功能了,簡直就是把區塊當畫布在使用一般,我們僅需要把樣板設定成三列,就能搞定垂直置中啦。 原理...

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

使用 Grid + align-items 製作垂直置中區塊

簡言 align-items 不僅是 Flex 可用,連 CSS grid 也擁有此屬性可使用,但在 Flex 中 align-items 是針對次軸(cros...

2018-10-28 ‧ 由 CSScoke 分享
DAY 14

使用 Grid + align-content 做垂直置中

簡言 CSS grid 的 align-content 跟 Flex 的 align-content 有點差異,CSS grid 對於空間的解釋會跟 Flex...

2018-10-29 ‧ 由 CSScoke 分享
DAY 15

使用 Grid + align-self 達到垂直置中效果

簡言 align-self 應該大家都不陌生,基本上就是對 grid Y軸的個別對齊方式,只要對單一子層物件設定 align-self: center 就能達成...

2018-10-30 ‧ 由 CSScoke 分享
DAY 16

使用 Grid + place-items 來做垂直置中效果

簡言 place-items 這屬性不知道有多少人用過,我們可利用這個屬性來快速設定 X 跟 Y 軸的對齊,達到垂直置中的效果。 原理說明 place-item...

2018-10-31 ‧ 由 CSScoke 分享
DAY 17

使用 Grid + place-content 製作垂直置中區塊

簡言 place-content 這個 CSS Grid 的屬性不知道有多少人用過,此屬性是 align-content 與 justify-content 的...

2018-11-01 ‧ 由 CSScoke 分享
DAY 18

使用 Grid + margin 來達到垂直置中目的

簡言 繼續用 Grid 來置中,由於 Grid 物件對空間解讀的特殊性,我們只要在父層物件設定 display: grid,接著在需要垂直置中的物件上設定 ma...

2018-11-02 ‧ 由 CSScoke 分享
DAY 19

使用 Display: table-cell 做網頁垂直置中

簡言 這一招我想有點年紀的開者應該都有看過了,當然像我這麼嫩的開發者當然是第一次看到啦(這是什麼幹話),這一招的原理在於使用 CSS display 屬性將di...

2018-11-03 ‧ 由 CSScoke 分享
DAY 20

使用計算機 calc 來做到垂直置中效果

簡言 Calc 是計算機英文單字「calculator」的縮寫,這個由微軟提出的 CSS 方法,真的是網頁開發的一大福音啊!我們竟然可以在網頁中直接做計算!?這...

2018-11-04 ‧ 由 CSScoke 分享