Logo agenceweb24

Comment centrer une page web ?

La bonne fa√ßon d’aligner au centre les mises en page Web

Comment centrer une page web ? Vous connaissez s√Ľrement les mises en page Web align√©es au centre de la fen√™tre du navigateur. Centrer un site Web avec CSS n’est pas un gros probl√®me.

Dans ce didacticiel, nous allons apprendre la bonne fa√ßon d’aligner au centre une mise en page Web.

comment centrer une page web ?

Il existe plusieurs milliers d’exemples de mises en page centr√©es sur le web. L’un de ces exemples est ce site Web uniquement.

Je joins une capture d’√©cran ci-dessous pour que cela reste contextuel √† la disposition centr√©e actuelle que j’utilise actuellement.

Le centrage de la mise en page n’est pas limit√© aux seules mises en page √† largeur fixe. Ils peuvent √©galement am√©liorer consid√©rablement la convivialit√© dans les mises en page hybrides pleine largeur.

Le concept

Comment centrer une page web ? Lorsque j’ai commenc√© en tant que concepteur de sites Web, je ne me souciais pas beaucoup de la technique et de la flexibilit√© du design.

J’avais l’habitude de mettre en page les choses strictement en fonction de ce que je concevais, et c’√©tait √† peu pr√®s tout.

Plus tard, j’ai pris l’habitude de voir les choses de pr√®s et comment elles vont se comporter dans le navigateur.

J’ai appris √† conna√ģtre certaines erreurs que je commettais lorsque j’ai observ√© √† quoi ressemblaient mes mises en page sur diff√©rents √©crans.

comment centrer une page web ?

Comment centrer une page web ? L’alignement horizontal des sites Web au centre est l’une de ces choses que je faisais mal.

En bref, voici quelques erreurs que j’ai commises dans ce contexte et la r√©activit√© de la fen√™tre¬†:

Comment centrer une page web ? Largeur inflexible de la mise en page ou de l’enveloppe de contenu.

Utilisation du module CSS d’alignement de texte pour centrer la mise en page.
Largeur flexible de l’emballage.

La premi√®re chose qui vient √† l’esprit lors du centrage de la mise en page est le r√©glage de la largeur.

Maintenant, si vous d√©finissez exclusivement la largeur. Vous devrez peut-√™tre le faire pour diff√©rents points d’arr√™t.

Il est toujours préférable de définir la largeur inclusive ou maximale à la place, pour le wrapper. Cela vous évite de définir et de remplacer la largeur exclusive encore et encore.

N’h√©sitez pas √† modifier les valeurs en surbrillance que vous allez voir dans les blocs de code ci-dessous.

HTML

Comment centrer une page web ? En supposant que vous connaissiez bien HTML et CSS, commençons par la mise en page de base que nous allons implémenter ici.

comment centrer une page web ?

<!DOCTYPE html>
<html lang=”fr”>
<tête>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width”>
</tête>
<corps>
<div class=”content-wrapper”>
<!– Tout le reste va ici. –>
</div><!– .content-wrapper –>
</body>
</html>

Notez que <html> et <body> acqui√®rent par d√©faut tout l’espace de rendu disponible dans la fen√™tre du navigateur. En d’autres termes, leurs attributs de largeur et de hauteur sont d√©j√† d√©finis sur 100¬†%.

CSS

.content-wrapper {
largeur maximale : 960px ;
}

Alignement sémantique de la mise en page
Aligner la mise en page √† l’aide des propri√©t√©s d’alignement du texte ne semble pas tr√®s sens√© s√©mantiquement.

Aujourd’hui, nous avons des modules CSS magiques comme Flexbox et Grid pour rationaliser la t√Ęche d’alignement.

comment centrer une page web ?

Comment centrer une page web ? En fait, j’ai un guide s√©par√© pour le centrage absolu avec CSS.

Mais attendez. Qu’en est-il de la propri√©t√© margin en CSS¬†?

Si vous avez entendu parler et utilis√© la marge automatique CSS. Vous savez de quoi je parle. Associez-le √† un √©l√©ment de taille inclusive et vous l’alignez centr√© horizontalement.

.content-wrapper {
marge droite : automatique ;
marge-gauche : auto ;
largeur maximale : 960px ;
}
Assurez-vous que l’√©l√©ment que vous ciblez est au niveau du bloc. Vous pouvez √©galement rendre cet utilitaire de bloc centr√© r√©utilisable en suivant comme ci-dessous¬†:

.centered-block-x {
bloc de visualisation;
marge droite : automatique ;
marge-gauche : auto ;
largeur maximale : 960px ;
}

Centrage vertical de la mise en page

Comment centrer une page web ? Les mises en page centrées verticalement sont dans la même veine que les mises en page horizontales.

La seule diff√©rence est que vous √©crivez des propri√©t√©s adapt√©es √† l’axe des y au lieu de l’axe des x.

.centered-block-y {
bloc de visualisation;
marge supérieure : automatique ;
marge inférieure : automatique ;
hauteur max : 500px ;
}
Le centrage horizontal est beaucoup plus courant que le centrage vertical des mises en page.

Mises en page absolument centr√©es. Nous connaissons maintenant la bonne fa√ßon de centrer notre mise en page Web √† la fois verticalement et horizontalement. Qu’en est-il du centrage absolu sur les deux axes¬†?

comment augmenter son trafic web ?

Jetez un Ňďil au CSS ci-dessous par exemple.

.centered-block {
bloc de visualisation;
marge : automatique ;
hauteur max : 500px ;
largeur maximale : 500 px ;
}

Comment centrer une page web ? En conclusion

Comment centrer une page web ? Ouf ! C’√©tait facile, n’est-ce pas ?

C’est ainsi que moi et la plupart des d√©veloppeurs Web frontaux centrons leurs sites Web et leurs conteneurs.

Comme toujours, les suggestions et les questions sont les bienvenues. N’h√©sitez pas √† partager votre exp√©rience avec le centrage de vos sites Web.