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.
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 ? 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.
<!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 ? 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 ?
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.