Codelab：在 CSS 中居中

Adam Argyle

在此 Codelab 中，您将了解如何分享和展示您喜爱的 CSS 居中方式。

请查看我的博文 Centering in CSS，了解我最喜欢的 5 种在 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 微博给我发送你的 Glitch，然后我会把它用在博文中！