點燈坊

失くすものさえない今が強くなるチャンスよ

實現滿版背景與水平垂直置中 Slogan

Sam Xiao's Avatar 2021-02-28

滿版背景加上水平垂直置中 Slogan 是首頁常見 Layout，可使用 Flexbox 或 m-auto 完成。

Version

Tailwind CSS 2.0.3

Flexbox

center000

滿版背景加上 title 與 slogan 水平垂直置中。

<template>
  <div class="bg-img bg-cover h-screen flex justify-center items-center">
    <div class="text-center text-white">
      <h1 class="text-3xl font-bold mb-4">title</h1>
      <p class="text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</template>

使用 Flexbox 實現。

第 2 行

<div class="bg-img bg-cover h-screen flex justify-center items-center">

設定背景圖片的 style：

  • bg-img：使用自訂 bg-img 設定背景圖片
  • bg-cover：設定圖片自動塞滿整個 <div>
  • h-screen：設定 <div> height
  • flex：使用 Flexbox
  • justify-center：子層水平置中
  • items-center：子層垂直置中

第 3 行

<div class="text-center text-white">

設定 title 與 slogan 的共用 style：

  • text-center：設定 text 水平置中於 <div>
  • text-white：設定 title 與 slogan 顏色

text-center 與 text-white 都具有 inherited 特性，因此可寫在父層共用

第 4 行

<h1 class="text-3xl font-bold mb-4">title</h1>

設定 title 的 style：

  • text-3xl：設定 font size
  • font-bold：設定 font weight
  • mb-4：設定 bottom margin

第 5 行

<p class="text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

設定 slogan 的 style：

  • text-base：設定 font size

m-auto

center001

將 justify-center 與 align-center 重構成 m-auto。

<template>
  <div class="bg-img bg-cover h-screen flex">
    <div class="text-center text-white m-auto">
      <h1 class="text-3xl font-bold mb-4">title</h1>
      <p class="text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
    </div>
  </div>
</template>

第 2 行

<div class="bg-img bg-cover h-screen flex">

設定背景圖片的 style：

  • 雖然仍使用 Flexbox，但已經不使用 justify-center 與 items-center

第 3 行

<div class="text-center text-white m-auto">

設定 title 與 slogan 共用 style：

  • m-auto：同時設定水平置中與垂直置中

Q：為什麼 m-auto 可實現水平置中與垂直置中 ?

Flexbox 對於 <div> 有兩個重大影響：

  • 若 <div> 沒設定 width，將不再佔據一整列，而是縮減成 content 寬度，這使得 m-auto可在水平方向自動調整 margin 而達成水平置中
  • 若父層有設定 height，則 <div> 外層尚有 flex line，這使得 m-auto 可在垂直方向自動調整 margin 而達成垂直置中

也拜這兩個特性所賜， m-auto 可取代 justify-center 與 items-center。

Flexbox Again

center002

原本需要 banner 與 slogan 兩層 <div>，是否能只用一層 <div> 完成需求 ?

<template>
  <div class="bg-img bg-cover h-screen flex flex-col justify-center text-center text-white">
    <h1 class="text-3xl font-bold mb-4">title</h1>
    <p class="text-base">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</template>

將兩層 <div> 縮減成只有一層 <div>。

第 2 行

<div class="bg-img bg-cover h-screen flex flex-col justify-center text-center text-white">

設定背景圖片與與 tilte / slogan 共用 style：

  • bg-img：使用自訂 bg-img 設定背景圖片
  • bg-cover：設定圖片自動塞滿整個 <div>
  • h-screen：設定 <div> height
  • flex：使用 Flexbox
  • flex-col：使用 Flexbox 後會使得 <div> 變成水平排列，因此要使用 flex-col 修正為垂直排列
  • justify-center：目前 main axis 為 column，因此 justify-center 相當於垂直置中
  • text-center：當 Flexbox 的 main axis 為 column 時，其 height 會縮減成 content 的 height，但 width 會佔據一整列，因此不需對 element 水平置中，只要使用 text-center 將 title 與 slogan 水平置中即可
  • text-white：設定 title 與 slogan 顏色

m-auto

center003

將 justify-center 重構成 m-auto。

<template>
  <div class="bg-img bg-cover h-screen flex flex-col text-center text-white">
    <h1 class="text-3xl font-bold mb-4 mt-auto">title</h1>
    <p class="text-base mb-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  </div>
</template>

第 2 行

<div class="bg-img bg-cover h-screen flex flex-col text-center text-white">

將父層的 justify-center 移除。

第 3 行

<h1 class="text-3xl font-bold mb-4 mt-auto">title</h1>
  • mt-auto：自動調整 title 的 top margin 而垂直置中

第 4 行

<p class="text-base mb-auto">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
  • mb-auto：自動調整 slogan 的 bottom margin 而垂直置中

Conclusion

  • Flexbox 寫在父層的 justify-center 與 align-center 可在子層使用 m-auto 取代
  • 儘管都使用 Flexbox，兩層與只有一層的寫法完全不一樣

# TailwindCSS