Atelier de programmation: Centrer en CSS

Adam Argyle

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 Centrer en CSS pour découvrir cinq de mes méthodes préférées pour centrer en CSS. Vous pouvez également regarder cette vidéo.

Configuration

  1. Cliquez sur Remixer pour modifier pour rendre le projet modifiable.
  2. Ouvrir app/index.html
  3. À line 23, remplacez /* your centering CSS here /* par votre CSS.
  4. (Facultatif) Nommez votre technique de centrage et remplacez le texte dans <h1>.

Styles

  1. Créer un fichier dans le dossier app/css/
  2. Créez un sélecteur pour contenir 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 à consulter les autres dans app/css/ à titre d'exemple).
  4. (facultatif) écrivez des "styles de support" pour que nous puissions voir quels enfants ont besoin de styles pour le centrage
  5. Ouvrez app/css/index.css et importez votre nouveau fichier en bas

Récapitulatif

  1. Rouvrir app/index.html
  2. Recherchez le <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 avec votre Glitch, et je le présenterai dans l'article de blog.