Mise en page CSS - Alignement horizontal et vertical
Centrer les éléments
horizontalement et verticalement
Centrer les éléments d'alignement
Pour centrer horizontalement un élément de bloc (comme <div>), utilisezmargin: 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
.center
{
margin: auto;
width: 50%;
border: 3px solid green;
padding: 10px;
}
Remarque : L'alignement au centre n'a aucun effet si la widthproprié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, utiliseztext-align: center;
Ce texte est centré.
Exemple
.center {
text-align: center;
border: 3px solid green;
}
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 autoet transformez-la en blockélément :
Exemple
img
{
display: block;
margin-left: auto;
margin-right: auto;
width: 40%;
}
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
.right
{
position: absolute;
right: 0px;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Remarque : 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 la floatpropriété :
Exemple
.right
{
float: right;
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
Le hack clearfix
Remarque : Si un élément est plus grand que l'élément qui le contient et qu'il est flottant, 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::after {
content: "";
clear: both;
display: table;
}
Centrer verticalement - Utilisation du rembourrage
There are many ways to center an element vertically in CSS. A simple solution is to use top and bottom padding:
I am vertically centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
}
To center both vertically and horizontally, use padding and text-align: center:
I am vertically and horizontally centered.
Example
.center {
padding: 70px 0;
border: 3px solid
green;
text-align: center;
}
Center Vertically - Using line-height
Another trick is to use the line-height property with a value that is equal
to the height property:
I am vertically and horizontally centered.
Example
.center {
line-height: 200px;
height: 200px;
border: 3px solid green;
text-align: center;
}
/* If the text has multiple lines, add the
following: */
.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}
Center Vertically - Using position & transform
If padding and line-height
are not options, another solution is to use positioning and the transform property:
I am vertically and horizontally centered.
Example
.center {
height: 200px;
position: relative;
border: 3px solid green;
}
.center p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
Tip: You will learn more about the transform property in our 2D Transforms Chapter.
Center Vertically - Using Flexbox
You can also use flexbox to center things. Just note that flexbox is not supported in IE10 and earlier versions:
Example
.center {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
border: 3px solid
green;
}
Tip: You will learn more about Flexbox in our CSS Flexbox Chapter.