Mise en page CSS – Alignement horizontal et vertical
Eléments centraux
horizontalement et verticalement
Centrer les éléments d’alignement
Pour centrer horizontalement un élément de bloc (comme
margin: auto;
Définir la largeur de l’élément l’empêchera de s’étendre jusqu’aux bords de son conteneur.
L’élément prendra alors la largeur spécifiée, et l’espace restant sera partagé également entre les deux marges :
Cet élément div est centré.
Exemple
.centre {
marge : automatique ;
largeur : 50 % ;
bordure : 3px vert solide ;
rembourrage : 10px ;
}
Essayez-le vous-même »
Note: L’alignement au centre n’a aucun effet si le width propriété n’est pas définie (ou définie sur 100 %).
Texte aligné au centre
Pour simplement centrer le texte à l’intérieur d’un élément, utilisez text-align: center;
Conseil: Pour plus d’exemples sur la façon d’aligner du texte, consultez le chapitre Texte CSS.
Centrer une image
Pour centrer une image, définissez les marges gauche et droite sur auto et en faire un block élément:
Exemple
image {
bloc de visualisation;
marge-gauche : auto ;
marge droite : auto ;
largeur : 40 % ;
}
Essayez-le vous-même »
Alignement gauche et droite – Utilisation de la position
Une méthode pour aligner des éléments consiste à utiliser position: absolute;:
Dans mes années les plus jeunes et les plus vulnérables, mon père m’a donné des conseils que je n’ai cessé de tourner dans ma tête depuis.
Exemple
.droite {
position : absolue ;
droite : 0px ;
largeur : 300 pixels ;
bordure : solide 3px #73AD21 ;
rembourrage : 10px ;
}
Essayez-le vous-même »
Note: Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.
Alignement à gauche et à droite – Utilisation du flotteur
Une autre méthode pour aligner des éléments consiste à utiliser le float propriété:
Exemple
.droite {
Flotter à droite;
largeur : 300 pixels ;
bordure : solide 3px #73AD21 ;
rembourrage : 10px ;
}
Essayez-le vous-même »
Le hack clearfix
Note: Si un élément est plus grand que l’élément qui le contient et qu’il flotte, il débordera de son conteneur. Vous pouvez utiliser le “hack clearfix” pour résoudre ce problème (voir l’exemple ci-dessous).
Sans Clearfix
Avec Clearfix
Ensuite, nous pouvons ajouter le hack clearfix à l’élément conteneur pour résoudre ce problème :
Exemple
.clearfix ::après {
contenu: “”;
clarifier les deux;
affichage : tableau ;
}
Essayez-le vous-même »
Centrer verticalement – Utilisation du rembourrage
Il existe de nombreuses façons de centrer un élément verticalement en CSS. Une solution simple consiste à utiliser le haut et le bas padding:
Je suis centré verticalement.
Pour centrer à la fois verticalement et horizontalement, utilisez padding et text-align: center:
Je suis centré verticalement et horizontalement.
Exemple
.centre {
rembourrage : 70px 0 ;
bordure : 3px vert solide ;
aligner le texte : centrer ;
}
Essayez-le vous-même »
Centrer verticalement – Utilisation de la hauteur de ligne
Une autre astuce consiste à utiliser le line-height propriété dont la valeur est égale à height propriété:
Je suis centré verticalement et horizontalement.
Exemple
.centre {
hauteur de ligne : 200px ;
hauteur : 200px ;
bordure : 3px vert solide ;
aligner le texte : centrer ;
}
/* Si le texte comporte plusieurs lignes, ajoutez ce qui suit : */
.center p {
hauteur de ligne : 1,5 ;
affichage : bloc en ligne ;
alignement vertical : milieu ;
}
Essayez-le vous-même »
Centrer verticalement – Utilisation de la position et de la transformation
Si padding et line-height
ne sont pas des options, une autre solution consiste à utiliser le positionnement et la transform propriété:
Je suis centré verticalement et horizontalement.
Exemple
.centre {
hauteur : 200px ;
position : relative ;
bordure : 3px vert solide ;
}
.center p {
marge : 0 ;
position : absolue ;
haut : 50 % ;
gauche : 50 % ;
transformer : traduire (-50 %, -50 % );
}
Essayez-le vous-même »
Conseil: Vous en apprendrez plus sur la propriété transform dans notre chapitre Transformations 2D.
Centrer verticalement – Utilisation de Flexbox
Vous pouvez également utiliser flexbox pour centrer les choses. Notez simplement que flexbox n’est pas pris en charge dans IE10 et les versions antérieures :
Je suis centré verticalement et horizontalement.
Exemple
.centre {
affichage : flexible ;
justifier-contenu : centrer ;
align-items : center ;
hauteur : 200px ;
bordure : 3px vert solide ;
}
Essayez-le vous-même »
Conseil: Vous en apprendrez plus sur Flexbox dans notre chapitre CSS Flexbox.
#Mise #page #CSS #Alignement #horizontal #vertical