Mise en page CSS - Alignement horizontal et vertical

Alignement centré d'un élément

Pour centrer horizontalement un élément (tel que <div>), vous pouvez utilisermargin: auto;。

Définir la largeur de l'élément l'empêchera de déborder sur les bords du conteneur.

L'élément est centré en spécifiant une largeur et en répartissant également les marges vides des deux côtés :

Remarque :Si la propriétéwidthn'est pas définie (ou si elle est définie sur 100%), l'alignement centré ne fonctionnera pas.

Alignement centré du texte

Si vous souhaitez uniquement centrer le texte dans un élément, vous pouvez utilisertext-align: center;

Astuce :Pour plus d'exemples d'alignement de texte, veuillez vous référer auTexte CSSChapitre.

Alignement centré de l'image

Pour centrer une image, vous pouvez utilisermargin: auto;Et la placer dans unélémentbloc :

Alignement à gauche/droite - en utilisant le positionnement

Nous pouvons utiliser la propriétéposition: absolute;pour aligner les éléments :

Remarque :Les éléments positionnés de manière absolue sont retirés du flux normal et peuvent chevaucher d'autres éléments.

Astuce :Lors de l'utilisation depositionLors de l'alignement des éléments, généralement<body>l'élément définiramarginetpadding. Cela peut éviter des différences visibles dans différents navigateurs.

Lors de l'utilisation de la propriété position, IE8 et les versions antérieures ont un problème. Si l'élément conteneur (dans notre cas <div class="container">) a une largeur spécifiée et que la déclaration !DOCTYPE est omise, alors IE8 et les versions antérieures ajouteront une marge supplémentaire de 17px sur le côté droit. Cela semble être de l'espace réservé à la barre de défilement. Lors de l'utilisation de la propriété position, définissez toujours la déclaration !DOCTYPE :

Alignement à gauche/droite - Utilisation de la méthode float

Nous pouvons également utiliser la propriétéfloatpour aligner des éléments :

Lors de l'alignement d'éléments comme ceci, il est judicieux de prédéfinir les propriétés margin et padding de l'élément <body>. Cela évite des différences visibles dans différents navigateurs.

Remarque : Si la hauteur de l'élément enfant est supérieure à celle de l'élément parent, et que l'élément enfant est défini sur float, alors l'élément enfant débordera. À ce stade, vous pouvez utiliser "clearfix(annuler le flottement)" pour résoudre ce problème.

Nous pouvons ajouter overflow: auto; à l'élément parent pour résoudre le problème de débordement de l'élément enfant :

Lors de l'utilisation de la propriété float, IE8 et les versions antérieures ont un problème. Si la déclaration !DOCTYPE est omise, alors IE8 et les versions antérieures ajouteront une marge supplémentaire de 17px sur le côté droit. Cela semble être de l'espace réservé pour la barre de défilement. Lorsque vous utilisez la propriété float, définissez toujours la déclaration !DOCTYPE :

Alignement vertical centré - Utilisation de padding

Il existe de nombreuses façons en CSS de réaliser un centrage vertical. Une façon simple consiste à utiliser en haut de l'en-têtepadding:

Si vous souhaitez centrer à la fois horizontalement et verticalement, vous pouvez utiliserpaddingettext-align: center:

Centrage vertical - en utilisant line-height

Centrage vertical - en utilisant position et transform

En plus d'utiliserpaddingetline-heightOutre la propriété, nous pouvons également utilisertransformpropriété pour définir le centrage vertical :

Astuce :Pour plus de contenu sur la propriété transform, vous pouvez vous référer àChapitre 2D Flip。

Plus d’exemples

CSS Utiliser margin pour centrer une div

CSS Utiliser le positionnement absolu pour aligner une div à droite