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 pour centrer des éléments en CSS.

Consultez mon article de blog Centering in CSS (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 Remix to Edit (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éez 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 à regarder les autres dans app/css/ comme exemples).
  4. (facultatif) Écrivez des "styles d'assistance" pour que nous puissions voir quels enfants ont besoin de styles pour prendre en charge la mise au centre.
  5. Ouvrez app/css/index.css et importez votre nouveau fichier en bas.

Faites la synthèse

  1. Rouvrir app/index.html
  2. Recherchez <article> et attribuez-lui le sélecteur personnalisé que vous avez créé à l'étape 2 de la section précédente.
  3. Tweetez-moi votre Glitch et je le présenterai dans l'article de blog !