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

本程式碼研究室可引導您進行操作,以分享您慣用的 例如 CSS、CSS、CSS 和 JS。

請參閱我的網誌文章 Centering in 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. 透過 Twitter 傳送推文,讓我推薦您的雜訊。 網誌文章!