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 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

  1. Cliquez sur Remix to Edit (Remixer pour modifier) pour rendre le projet modifiable.
  2. Ouvrir app/index.html
  3. Pour line 23, remplacez /* your centering CSS here /* par votre CSS
  4. (Facultatif) Attribuez un nom à la technique de centrage et remplacez le texte figurant dans la section <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 à consulter l'autre dans app/css/ comme exemples).
  4. (Facultatif) Écrivez des "styles de prise en charge" afin de voir quels enfants ont besoin de styles pour prendre en charge le centrage.
  5. Ouvrez app/css/index.css et importez votre nouveau fichier en bas de l'écran

Faites la distinction

  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. Envoyez-moi un tweet pour signaler votre Glitch, et je l'ajouterai dans l'article de blog.