Le CSS possède plusieurs propriétés qui peuvent être utilisées pour aligner des éléments sur des pages Web.
Sur cette page, vous apprendrez comment aligner des éléments HTML à l'aide de diverses propriétés CSS.
Alignement du texte
Le texte à l'intérieur des éléments de type bloc (tels que <p>, <h1>, ...) peut être aligné en définissant correctement la propriété CSS text-align.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Définir l'alignement du texte à l'aide de CSS</title>
<style>
h1 {
text-align: center;
}
.p1 {
width: 500px;
text-align: justify;
}
.p2 {
width: 500px;
text-align: left;
}
.p3 {
width: 500px;
text-align: right;
}
</style>
</head>
<body>
<h1>Ceci est un titre</h1>
<p class="p1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
<h1>Un deuxième titre</h1>
<p class="p2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
<h1>Un troisième titre</h1>
<p class="p3">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante. Vestibulum id metus ac nisl bibendum scelerisque non non purus. Suspendisse varius nibh non aliquet sagittis.</p>
</body>
</body>
</html>
Résultat
Alignement centré à l'aide de la propriété margin
L'alignement au centre d'un élément de type bloc est l'une des implications les plus importantes de la propriété CSS margin. Par exemple, le conteneur <div> peut être aligné horizontalement au centre en définissant les marges gauche et droite sur auto.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple d'alignement centré en CSS</title>
<style>
div {
width: 50%;
margin: 0 auto;
padding: 15px;
background: lightblue;
}
</style>
</head>
<body>
<div>Ce conteneur div est centré et aligné horizontalement.</div>
</body>
</html>
Résultat
Les règles de style de l'exemple ci-dessus alignent au centre l'élément <div> horizontalement.
Remarque : la valeur auto pour la propriété margin ne fonctionnera pas dans Internet Explorer 8 et les versions antérieures, à moins qu'un <!DOCTYPE> ne soit spécifié.
Alignement des éléments HTML à l'aide de la propriété position
La propriété CSS position, associée aux propriétés left, right, top et bottom, peut être utilisée pour aligner des éléments par rapport à la fenêtre d'affichage du document ou à l'élément parent qui les contient.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple de positionnement en CSS</title>
<style>
p {
width: 200px;
padding: 10px;
}
.up {
background: #ee665a;
position: absolute;
top: 0;
left: 0;
}
.down {
background: #b0d878;
position: absolute;
bottom: 0;
left: 0;
}
.up-right {
background: #f5e942;
position: absolute;
top: 0;
right: 0;
}
.down-right {
background: #4287f5;
position: absolute;
bottom: 0;
right: 0;
}
</style>
</head>
<body>
<p class="up">Ce paragraphe est placé en haut et à gauche de la fenêtre d'affichage du document.</p>
<p class="down">Ce paragraphe est placé en bas et à gauche de la fenêtre d'affichage du document.</p>
<p class="up-right">Ce paragraphe est placé en haut et à droite de la fenêtre d'affichage du document.</p>
<p class="down-right">Ce paragraphe est placé en bas et à droite de la fenêtre d'affichage du document.</p>
</body>
</html>
Résultat
Alignement à gauche et à droite à l'aide de la propriété float
La propriété CSS float peut être utilisée pour aligner un élément à gauche ou à droite du bloc qui le contient, de manière à ce que d'autres contenus puissent être placé sur son côté.
Ainsi, si un élément est flottant vers la gauche, le contenu sera placé le long de son côté droit. Inversement, si l'élément est flottant vers la droite, le contenu sera placé le long de son côté gauche.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple de la propriété CSS float</title>
<style>
div {
width: 200px;
padding: 10px;
}
div.red {
float: left;
background: #ff0000;
}
div.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="red">Flottant à gauche.</div>
<div class="green">Flottant à droite.</div>
</body>
</html>
Effacer les flotteurs
L'un des aspects les plus déroutants de l'utilisation des mises en page basées sur des éléments flottants est l'affaissement du parent. L'élément parent ne s'étire pas automatiquement vers le haut pour accueillir les éléments flottants. Bien que cela ne soit pas toujours évident si le parent ne contient pas de couleur d'arrière-plan ou de bordures visibles, il est important d'en être conscient et de s'en préoccuper pour éviter les problèmes de mise en page étrange et les problèmes liés aux navigateurs. Voir l'image ci-dessous
Vous pouvez voir que l'élément <div> ne s'étire pas automatiquement vers le haut pour accueillir les images flottantes. Ce problème peut être résolu en effaçant le flotteur après les éléments flottants du conteneur mais avant la balise de fermeture de l'élément conteneur.
Corriger le problème du parent rétracté
Il existe plusieurs façons de résoudre le problème de l'affaissement du parent en CSS. La section suivante vous décrit ces solutions avec des exemples concrets.
Solution 1 : faire flotter le conteneur
Le moyen le plus simple de résoudre ce problème est de faire flotter l'élément parent qui le contient.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple d'effacement de flotteurs</title>
<style>
.container{
float: left;
background: yellow;
border: 1px solid #c4884d;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
}
.red {
float: left;
background: #ff0000;
}
.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container">
<p class="red">Flottant à gauche.</p>
<p class="green">Flottant à droite.</p>
</div>
</body>
</html>
Résultat
Attention : Cette solution ne fonctionnera que dans un nombre limité de circonstances, car faire flotter le parent peut produire des résultats inattendus.
Solution 2 : utiliser un Div vide
C'est une méthode ancienne, mais c'est une solution facile qui fonctionne dans tous les navigateurs.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple d'effacement de flotteurs</title>
<style>
.container{
background: yellow;
border: 1px solid #c4884d;
}
.clearfix {
clear: both;
visibility: hidden;
height: 0;
}
p {
width: 200px;
margin: 10px;
padding: 10px;
}
.red {
float: left;
background: #ff0000;
}
.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container">
<p class="red">Flottant à gauche.</p>
<p class="green">Flottant à droite.</p>
<div class="clearfix"> </div>
</div>
</body>
</html>
Résultat
Vous pouvez également le faire au moyen d'une balise <br>. Mais cette méthode n'est pas recommandée car elle ajoute du code non sémantique à votre balisage.
Solution 3 : utiliser la pseudo-élément :after
Le pseudo-élément :after, associé à la propriété content, a été assez largement utilisé pour résoudre les problèmes d'effacement des flotteurs.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Exemple d'effacement de flotteurs</title>
<style>
.container{
background:yellow;
border: 1px solid #000000;
}
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.container div {
width: 200px;
margin: 10px;
padding: 10px;
}
div.red {
float: left;
background: #ff0000
}
div.green {
float: right;
background: #00ff00;
}
</style>
</head>
<body>
<div class="container clearfix">
<div class="red">Flottant à gauche.</div>
<div class="green">Flottant à droite.</div>
</div>
</body>
</html>
Résultat
La classe ".clearfix" est appliquée à tout conteneur qui a des enfants flottants.
Attention : Internet Explorer jusqu'à IE7 ne supporte pas le pseudo-élément :after. Cependant IE8 le supporte, mais nécessite un <!DOCTYPE> pour être déclaré.
