Atelier de programmation: Centrer en CSS

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

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour pouvoir modifier le projet.
  2. Ouvrir app/index.html
  3. À line 23, remplacez /* your centering CSS here /* par votre CSS
  4. (Facultatif) Attribuez un nom à votre technique de centrage et remplacez le texte dans la <h1>

Styles

  1. Créez un fichier dans le dossier app/css/.
  2. Créez un sélecteur pour y placer votre solution de centrage, comme .turbo-center ou [floaty-mcfloat]
  3. Dans ce nouveau sélecteur, écrivez votre technique de centrage (n'hésitez pas à regarder au niveau des autres dans app/css/, par exemple)
  4. (Facultatif) Écrivez des "styles d'assistance" afin de voir quels enfants ont besoin pour permettre le centrage
  5. Ouvrez app/css/index.css et importez votre nouveau fichier en bas de l'écran.

Associez tout

  1. Rouvrir app/index.html
  2. 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.
  3. Envoyez-moi un tweet sur votre Glitch pour que je l'affiche sur l'article de blog !