程式碼研究室:在 CSS 中置中
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本程式碼研究室會引導您分享,並展示自己在 CSS 中置中的方式。
請參閱我的網誌文章「透過 CSS 中心」,瞭解我在 CSS 中置中的 5 大方法。或觀看這部影片!
設定
- 按一下「Remix to Edit」,讓專案可供編輯。
- 開啟「
app/index.html
」
- 在
line 23
中,將 /* your centering CSS here /*
替換成您的 CSS
- (選用) 為中心技巧命名並取代
<h1>
中的文字
風格
- 在
app/css/
資料夾中建立新檔案
- 建立選取器來存放中央解決方案,例如
.turbo-center
或 [floaty-mcfloat]
- 在該新的選取器中,編寫您的中心技術 (您可以在
app/css/
中查看其他項目做為範例)
- (選用) 編寫一些「支援樣式」,以便我們查看哪些子項需要樣式才能支援中心點
- 開啟
app/css/index.css
,並在底部匯入新檔案
融為一體
- 再次開啟「
app/index.html
」
- 找出
<article>
,並提供您在上一節步驟 #2 建立的自訂選取器。
- 快透過 Twitter 推文,告訴我們在網誌文章上吧!
除非另有註明,否則本頁面中的內容是採用創用 CC 姓名標示 4.0 授權,程式碼範例則為阿帕契 2.0 授權。詳情請參閱《Google Developers 網站政策》。Java 是 Oracle 和/或其關聯企業的註冊商標。
上次更新時間:2020-12-16 (世界標準時間)。
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"缺少我需要的資訊"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"過於複雜/步驟過多"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"過時"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"翻譯問題"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"示例/程式碼問題"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"其他"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"容易理解"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"確實解決了我的問題"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"其他"
}]