Cet atelier de programmation vous explique comment partager et présenter votre méthode préférée pour centrer CSS
Consultez mon article de blog Centering in CSS pour en savoir plus sur cinq mes façons préférées de centrer en CSS. Ou regardez cette vidéo !
Configuration
- Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
- Ouvrir
app/index.html
- À
line 23
, remplacez/* your centering CSS here /*
par votre CSS - (Facultatif) Attribuez un nom à votre technique de centrage et remplacez le texte dans la
<h1>
Styles
- Créez un fichier dans le dossier
app/css/
. - Créez un sélecteur pour y placer votre solution de centrage, comme
.turbo-center
ou[floaty-mcfloat]
- Dans ce nouveau sélecteur, écrivez votre technique de centrage (n'hésitez pas à regarder
au niveau des autres dans
app/css/
, par exemple) - (Facultatif) Écrivez des "styles d'assistance" afin de voir quels enfants ont besoin pour permettre le centrage
- Ouvrez
app/css/index.css
et importez votre nouveau fichier en bas de l'écran.
Associez tout
- Rouvrir
app/index.html
- Localisez l'élément
<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 sur votre Glitch pour que je l'affiche sur l'article de blog !