Codelab:在 CSS 中居中
使用集合让一切井井有条
根据您的偏好保存内容并对其进行分类。
在此 Codelab 中,您将了解如何分享和展示您喜爱的 CSS 居中方式。
请查看我的博文 Centering in CSS,了解我最喜欢的 5 种在 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 微博给我发送你的 Glitch,然后我会把它用在博文中!
如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。
最后更新时间 (UTC):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":"其他"
}]