[CSS] 水平置中與垂直置中(傳統作法)

想說把之前報過的幾個簡報整理為文章記錄一下好了XD 在 CSS 中,大家時常為了水平置中與垂直置中的問題而困擾,這篇文章整理幾個傳統解決置中的做法。 不過現在 CSS3 有 flexbox 排版與 grid 排版,幫助我們解決排版的問題,只不過還不夠普及就是了。(flexbox 在IE上還有許多bug….) 首先必須知道在 HTML 的每個元素都有預設的一個 display 屬性,詳情請查文件 如: inline: <span>、<a>、<b>、<i>…等。 inline 元素預設依據內容多寡決定寬度並可以多個並排在一行,無法設定 width、height、margin-top、margin-bottom、padding-top 及 padding-bottom。 block: <div>、<nav>、<section>、<p>、<h1>…等。 block 元素預設會佔滿父元素的100%並且換行, inline-block: 可以多個並排在一行,且可以設定 block 的所有 CSS 屬性。(引述以下 Vexed Blog:就是外面是 inline ,裡面是 block 。) flex: CSS3 的一種排版方式,請見此文章。 其他: 剩下的其他屬性相比較不常見,有用到再自己看囉! 接下來,我就以 inline 與 block 的水平置中及垂直置中方法來介紹(inline-block 的方法就與 inline 一樣)~ 水平置中 […]

Continue reading