iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 2
4
Modern Web

30 道難解的 CSS 排版系列 第 2

[30 道難解的 CSS 排版] 第 2 道:認識對齊 II

本文同步刊載於 MUKI space 部落格:[30 道難解的 CSS 排版] 第 2 道:認識對齊 II

昨天講了 text-align 以及 vertical-align 這兩個常見的對齊語法,但他們可以對齊的範圍都比較小,偏向對齊元件,而非版面。

如果要讓版面置中,或是再更複雜的一些排版,我們還可以有更多選擇。


版面置中的好幫手: margin

這個應該很多人都用到爛掉了,但有的朋友可能不太懂原理,在此簡單介紹一下。

我們在切一個大版面時,如果要讓他左右置中,現在普遍最快的方法是使用以下語法:

.container {
  width: 1200px;
  margin: 0 auto;
}

然後版面就可以置中了。

margin: 0 auto;margin: 0 auto 0 auto; 的簡寫,表示上下邊界為 0 ,左右為 auto 表示自己均分。margin 會去判斷 .container 的寬度以及螢幕的寬度,相減之後除以二就是左右邊界的數值了。

至於該如何得到 .container 的寬度呢?就是必須要在 CSS 寫上寬度,如果沒寫寬度是不會有效果的。

https://ithelp.ithome.com.tw/upload/images/20190905/20120631HDfL0rY0Sy.png

margin 大到版面,小到元件,只要有指定元素的寬度,幾乎都可以用這個方法左右置中。

<div class="row">
  <div class="row__container">
    <div class="col col--a">A<br />利用 margin 置中</div>
  </div>
  <div class="row__container">
    <div class="col col--b">B<br />利用 margin 置中</div>
  </div>
</div>
.row {
  width: 500px;
  margin: 0 auto;
  &::after {
    content: '';
    display: table;
    clear: both;
  }
}

.row__container {
  width: 50%;
  float: left;
}

.col {
  width: 60%;
  margin: 0 auto;
}

https://ithelp.ithome.com.tw/upload/images/20190905/20120631jD6XtIlkz3.png

更多的 margin

  • 圖片一樣可以使用 margin: 0 auto; 置中
  • margin可以讓版面置中,但沒辦法讓文字置中唷。

讓 padding 幫你實現簡單的垂直置中

如果說 margin 是負責版面,那 padding 就是負責裡面的元素了。

我們可以利用 padding 將 Box Model 往外推的特性做到置中的效果,只要上下數值一樣就可以囉。

.row {
  padding: 4em 0;
  width: 500px;
  text-align: center;
}

https://ithelp.ithome.com.tw/upload/images/20190905/20120631e5K39fiSH0.png


選單文字垂直置中的首選 line-height

▼ 假設今天要製作一個類似這樣的選單,文字需要垂直置中,同時又有限定元素的高度。

https://ithelp.ithome.com.tw/upload/images/20190905/20120631xeKSzbHqQB.png

因為有限定高度,所以我們沒辦法用 padding去推 Box Model;另外一個原因是,如果選單再複雜一點,padding 通常都另有用途。

所以假設今天需求是:

  • 有限定元素高度
  • 文字需垂直置中
  • 文字非常單純只有一行

的情況下,可以直接用 line-height 解決,只要讓 line-heightheight 高度相同即可

.menu__item {
  height: 30px;
  line-height: 30px;
}

用 position 讓你的版面水平垂直置中

先跟大家分享一張非常清楚的圖解,取自 Smashing Magazine 的大作。

https://ithelp.ithome.com.tw/upload/images/20190905/20120631JRrzPOKPdJ.png

(圖片來源:smashingmagazine

如圖所示,不管該元素(DIV)多大,我們都可以先用 position: absolute 讓元素放在中央。

position: absolute;
top: 50%;
left: 50%;

但事情可沒那麼簡單,利用 absolute 調整位子的基準,是從該元素的「左上角」開始算起。所以如果在 X 以及 Y 軸各設 50%,是針對元素左上角(紅色點)的 50%

▼ 因此該元素(DIV)位子會掉到淺灰色區塊的地方,但是紅點剛好在畫面正中央。

https://ithelp.ithome.com.tw/upload/images/20190905/20120631JRrzPOKPdJ.png

我們必須要再給予元素明確的高與寬,利用 margin-top 以及 margin-left 把元素往回推。往回推的數值就是(高/2)以及(寬/2)。如果高是 300px,就往回推 150px,依此類推。

最後垂直置中的程式碼會如下所示:

div {
  width: 600px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -150px 0 0 -300px;
}

用 transform 做出與 position 類似的置中效果

transformposition 類似,都是直接將 Box Model 推移到特定的位置上,達到置中的效果。

使用 position 可以再利用 margin 去推算要定位的位置,但前提是你必須要知道元素的寬跟高,才有辦法回推。但使用 positiontransform就不用特別設定寬跟高,非常的方便

.card {
  position: relative;
}
.card__item {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

https://ithelp.ithome.com.tw/upload/images/20190905/20120631XuPx1Reqby.png



上一篇
[30 道難解的 CSS 排版] 第 1 道:認識對齊 I
系列文
30 道難解的 CSS 排版2

尚未有邦友留言

立即登入留言