Codelab：在 CSS 中居中

Adam Argyle

通过此 Codelab，您可以分享和展示自己在 CSS 中居中显示内容的首选方式。

请参阅我的博文 CSS 中的居中，了解我在 CSS 中居中显示内容的 5 种首选方法。或者观看此视频！

设置

  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. 在推特上向我发送您的 Glitch，我会在博文中展示它！