Cet atelier de programmation vous permet de partager et de présenter votre méthode préférée de centrage en CSS.
Consultez mon article de blog Centering in CSS (Centrer en CSS) pour connaître les cinq de mes méthodes préférées pour centrer en CSS. Ou regardez cette vidéo !
Préparation
- Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
- Ouvrir
app/index.html
- Pour
line 23
, remplacez/* your centering CSS here /*
par votre CSS - (Facultatif) Attribuez un nom à la technique de centrage et remplacez le texte figurant dans la section
<h1>
.
Styles
- Créez un fichier dans le dossier
app/css/
. - Créez un sélecteur pour contenir votre solution de centrage, comme
.turbo-center
ou[floaty-mcfloat]
. - Dans ce nouveau sélecteur, écrivez votre technique de centrage (n'hésitez pas à consulter l'autre dans
app/css/
comme exemples). - (Facultatif) Écrivez des "styles de prise en charge" afin de voir quels enfants ont besoin de styles pour prendre en charge le centrage.
- Ouvrez
app/css/index.css
et importez votre nouveau fichier en bas de l'écran
Faites la distinction
- Rouvrir
app/index.html
- Recherchez
<article>
et attribuez-lui le sélecteur personnalisé que vous avez créé à l'étape 2 de la section précédente. - Envoyez-moi un tweet pour signaler votre Glitch, et je l'ajouterai dans l'article de blog.