Width and centering · Largeur et centrage
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · Cette page nécessite un navigateur récent (avec support SharedArrayBuffer). Veuillez mettre à jour Chrome, Edge, Firefox ou Safari vers la dernière version.
English
Width
- By default, a block box is as wide as the page.
width: 300px;makes it a fixed width instead.max-width: 600px;is gentler — at most this wide, but shrink on small screens.
Français
Largeur
- Par défaut, une boîte block est aussi large que la page.
width: 300px;lui donne une largeur fixe.max-width: 600px;est plus doux — au maximum cette largeur, mais réduit sur les petits écrans.
English
Centering a box
- To center a box (not just its text), give it a width, then
margin: 0 auto;. 0 automeans no top/bottom margin, and equal left/right margins.- Equal side margins push the box into the middle.
Français
Centrer une boîte
- Pour centrer une boîte (et non seulement son texte), donnez-lui une largeur, puis
margin: 0 auto;. 0 autosignifie aucune marge top/bottom, et des marges gauche/droite égales.- Des marges latérales égales poussent la boîte au milieu.
<style>
.card {
width: 280px;
margin: 0 auto;
padding: 16px;
background-color: #eef;
}
</style>
<div class="card">A centered card.</div>
English
Common mistakes
- Centre a block with a set width using
margin: 0 auto. - A width in
%is relative to the parent element.
Français
Erreurs courantes
- Centrez un élément block avec une largeur définie en utilisant
margin: 0 auto. - Une largeur en
%est relative à l'élément parent.
English
Now you try
- A box needs a width before
margin: 0 auto;can center it. - Set a width, then center the card.
Français
À vous maintenant
- Une boîte a besoin d'une largeur avant que
margin: 0 auto;puisse la centrer. - Définissez une largeur, puis centrez la carte.
Explore · Explorer
Width and the box · Largeur et la boîte
Width sets the content · contenu size; padding/border/margin add around it. · La largeur définit la taille du contenu ; padding/border/margin s'ajoutent autour.
Give the card a fixed width. Add width: 300px; to the .card rule. · Donnez à la carte une largeur fixe. Ajoutez width: 300px; à la règle .card.
Center the card on the page. Add margin: 0 auto; to the .card rule. · Centrez la carte sur la page. Ajoutez margin: 0 auto; à la règle .card.