程式碼研究室:在 CSS 中置中
bookmark_borderbookmark
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
本程式碼研究室可引導您進行操作,以分享您慣用的
例如 CSS、CSS、CSS 和 JS。
請參閱我的網誌文章 Centering in CSS,藉此瞭解
我最喜歡的方式你也可以觀看這部影片!
設定
- 按一下「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 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間:2020-12-16 (世界標準時間)。"],[],[]]