This codelab sets you up to share and showcase your favorite way of centering in CSS.
Check out my blog post Centering in CSS to learn about 5 of my favorite ways to center in CSS. Or watch this video!
Setup
- Click Remix to Edit to make the project editable.
- Open
app/index.html
- At
line 23
, replace/* your centering CSS here /*
with your CSS - (optional) Name your centering technique and replace the text in the
<h1>
Styles
- Create a new file in the
app/css/
folder - Create a selector to hold your centering solution, like
.turbo-center
or[floaty-mcfloat]
- Within that new selector, write your centering technique (feel free to look
at the other's in
app/css/
as examples) - (optional) write some "support styles" so we can see which children need styles to support the centering
- Open
app/css/index.css
and import your new file at the bottom
Tie it all up
- Open
app/index.html
again - Find the
<article>
and give it your custom selector you made in step #2 of the previous section. - Tweet me your Glitch and I'll feature it on the blog post!