在此 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,然后我会把它用在博文中!