程式碼研究室：在 CSS 中置中

Adam Argyle

本程式碼研究室會協助您設定，以便分享及展示您最喜歡的 CSS 置中方式。

請參閱我的網誌文章「Centering in CSS」，瞭解我最喜歡的 5 種 CSS 置中方式。或觀看這部影片！

設定

  1. 按一下「Remix to Edit」，即可編輯專案。
  2. 開啟「app/index.html」
  3. 在 line 23 中，將 /* your centering CSS here /* 替換為你的 CSS
  4. (選用) 為置中技術命名，並取代 <h1> 中的文字

樣式

  1. 在 app/css/ 資料夾中建立新檔案
  2. 建立選取器來保留置中解決方案，例如 .turbo-center 或 [floaty-mcfloat]
  3. 在新的選取器中，編寫置中技術 (歡迎參考其他選取器中的 app/css/ 做為範例)
  4. (選用) 撰寫一些「支援樣式」，方便我們查看哪些子項需要樣式來支援置中
  5. 開啟 app/css/index.css，並在底部匯入新檔案

整合所有內容

  1. 再次開啟「app/index.html」
  2. 找出 <article>，並提供您在上一個章節步驟 2 中建立的自訂選取器。
  3. 在推特上發布你的 Glitch，我會在網誌文章中介紹你的作品！