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，我会在博文中展示它！