Disposition CSS - Alignement horizontal et vertical


Table des matières

    Afficher la table des matières

Center elements
horizontally and vertically


Centrer les éléments d'alignement

Pour centrer horizontalement un élément de bloc (comme <div>), utilisez margin: auto;

Définir la largeur de l'élément l'empêchera de s'étendre jusqu'au bords de son contenant.

L'élément occupera alors la largeur spécifiée et l'espace restant sera réparti à parts égales entre les deux marges :

This div element is centered.

Exemple

.center
{
  margin: auto;
   
width: 50%;
   
border: 3px solid green;
  padding: 10px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  margin: auto;
  width: 60%;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Center Align Elements</h2>
<p>To horizontally center a block element (like div), use margin: auto;</p>

<div class="center">
  <p>Hello World!</p>
</div>

</body>
</html>


Remarque : L'alignement central n'a aucun effet si la propriété width n'est pas définie. (ou réglé à 100 %).


Centrer le texte

Pour centrer simplement le texte à l'intérieur d'un élément, utilisez text-align: center;

This text is centered.

Exemple

.center {
  text-align: center;
  
border: 3px solid green;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  text-align: center;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center Text</h2>

<div class="center">
  <p>This text is centered.</p>
</div>

</body>
</html>


Conseil : Pour plus d'exemples sur la façon d'aligner le texte, consultez le chapitre Texte CSS.



Centrer une image

Pour centrer une image, définissez les marges gauche et droite sur auto et transformez-la en élément block :

Paris

Exemple

img
{
  display: block;
    margin-left: auto;
  margin-right: auto;
  width: 40%;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
</style>
</head>
<body>

<h2>Center an Image</h2>
<p>To center an image, set left and right margin to auto, and make it into a block element.</p>

<img src="paris.jpg" alt="Paris" style="width:40%">

</body>
</html>



Aligner à gauche et à droite - Utilisation de la position

Une méthode pour aligner les éléments consiste à utiliser position: absolue; :

In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.

Exemple

.right
{
  position: absolute;
   
right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the position property</h2>

<p>An example of how to right align elements with the position property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>


Remarque : Les éléments positionnés en absolu sont supprimés du flux normal et peuvent chevaucher des éléments.


Aligner à gauche et à droite - Utilisation du flotteur

Une autre méthode pour aligner les éléments consiste à utiliser la propriété float :

Exemple

.right
{
  float: right;
   
width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
</style>
</head>
<body>

<h2>Right align with the float property</h2>

<p>An example of how to right align elements with the float property:</p>

<div class="right">
  <p>In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since.</p>
</div>

</body>
</html>



Le hack clearfix

Remarque : Si un élément est plus grand que l'élément qui le contient et qu'il flotte, il débordera à l’extérieur de son contenant. Vous pouvez utiliser le "clearfix hack" pour résoudre ce problème (voir exemple ci-dessous).

Sans Clearfix

Avec Clearfix

Ensuite, nous pouvons ajouter le hack clearfix à l'élément conteneur pour corriger ce problème:

Exemple

 .clearfix::after {
  content: "";
  clear: both;
  
  display: table;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
div {
  border: 3px solid #4CAF50;
  padding: 5px;
}

.img1 {
  float: right;
}

.img2 {
  float: right;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<h2>Without Clearfix</h2>

<p>This image is floated to the right. It is also taller than the element containing it, so it overflows outside of its container:</p>

<div>
  <img class="img1" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

<h2 style="clear:right">With New Modern Clearfix</h2>
<p>Add the clearfix hack to the containing element, to fix this problem:</p>

<div class="clearfix">
  <img class="img2" src="pineapple.jpg" alt="Pineapple" width="170" height="170">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
</div>

</body>
</html>



Centrer verticalement - Utilisation du remplissage

Il existe de nombreuses façons de centrer verticalement un élément en CSS. Une solution simple consiste à utiliser un padding supérieur et inférieur :

I am vertically centered.

Exemple

.center {
  padding: 70px 0;
  border: 3px solid 
green;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
}
</style>
</head>
<body>

<h2>Center vertically with padding</h2>

<p>In this example, we use the padding property to center the div element vertically:</p>

<div class="center">
  <p>I am vertically centered.</p>
</div>

</body>
</html>


Pour centrer verticalement et horizontalement, utilisez padding et text-align: center :

I am vertically and horizontally centered.

Exemple

.center {
  padding: 70px 0;
  border: 3px solid 
green;
  text-align: center;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  padding: 70px 0;
  border: 3px solid green;
  text-align: center;
}
</style>
</head>
<body>

<h2>Center with padding and text-align</h2>

<p>In this example, we use padding and text-align to center the div element both vertically and horizontally:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>



Centrer verticalement - Utilisation de la hauteur de ligne

Une autre astuce consiste à utiliser la propriété line-height avec une valeur égale à la propriété hauteur :

I am vertically and horizontally centered.

Exemple

.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;
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
</style>
</head>
<body>

<h2>Center with line-height</h2>

<p>In this example, we use the line-height property with a value that is equal to the height property to center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>



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 propriété transform :

I am vertically and horizontally centered.

Exemple

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  
position: absolute;
  top: 50%;
  
left: 50%;
  transform: translate(-50%, -50%);
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
</style>
</head>
<body>

<h2>Center with position and transform</h2>

<p>In this example, we use positioning and the transform property to vertically and horizontally center the div element:</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>


Conseil : Vous en apprendrez davantage sur la propriété de transformation dans nos transformations 2D. Chapitre.


Centrer verticalement - Utilisation de Flexbox

Vous pouvez également utiliser flexbox pour centrer les éléments. Notez simplement que flexbox n'est pas pris en charge dans IE10 et les versions antérieures :

I am vertically and horizontally centered.

Exemple

 .center {
  display: flex;
  justify-content: center;
  
  align-items: center;
  height: 200px;
  border: 3px solid 
  green; 
}

Essayez-le vous-même →

<!DOCTYPE html>
<html>
<head>
<style>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}
</style>
</head>
<body>

<h2>Flexbox Centering</h2>

<p>A container with both the justify-content and the align-items properties set to <em>center</em> will align the item(s) in the center (in both axis).</p>

<div class="center">
  <p>I am vertically and horizontally centered.</p>
</div>

</body>
</html>


Conseil : Vous en apprendrez davantage sur Flexbox dans notre chapitre CSS Flexbox.