CSS : mettre en forme le Web (école d'ingénieur) · Chapitre 6 · Exercice de TD

Quelle technique de centrage ?

Positionnement et empilement · niveau 1 (application)

Énoncé

Choisir et écrire la technique de centrage pour :

le titre d'une carte ;
la colonne principale de 60 rem au plus ;
une icône dans un bouton carré de 48 pixels ;
un message « Chargement… » au centre d'une zone de résultats en position: relative, au-dessus des résultats.

Du texte : .carte h3 { text-align: center; }.
Un bloc de largeur limitée : sur <main>, max-width: 60rem et margin: 0 auto.
Un enfant à centrer dans les deux directions. En Flexbox : justify-content: center et align-items: center sur le bouton ; ou bien, en Grid, place-items: center.
Une boîte absolue de taille inconnue :


.chargement {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
}

100 % gratuit

La suite du chapitre est sur Adloun

Sans compte : le cours et le premier QCM. Exercices et tuteur : inscription gratuite en 30 secondes, sans carte bancaire.