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

本程式碼研究室會引導您分享,並展示自己在 CSS 中置中的方式。

請參閱我的網誌文章「透過 CSS 中心」,瞭解我在 CSS 中置中的 5 大方法。或觀看這部影片!

設定

  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. 透過 Twitter 推文,告訴我們在網誌文章上吧!