FAQ CSS
FAQ CSSConsultez toutes les FAQ
Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 14 juin 2021
Sommaire→Techniques→Positionnement- Comment centrer horizontalement n'importe quel élément en CSS ?
- Comment aligner verticalement un élément inline ?
- Comment centrer verticalement un élément block ?
- Comment décaler un objet vers la droite, sans pour autant le centrer ?
- Comment placer du texte autour d'une image ?
- Comment superposer deux images ?
- Comment positionner un élément en absolute ?
- Comment décaler légèrement un élément sans impacter ses adjacents ?
On peut le faire en CSS grâce au code présenté ci-dessous
<body>
<div class="centrer">Mon bloc centré horizontalement</div>
</body>Et le code CSS utile au positionnement
body {
margin : 0px;
padding : 0px;
text-align: center; /* pour résoudre le bug de centrage sous IE5 et IE6-7 en mode Quirks */
}
.centrer {
margin-left : auto;
margin-right : auto;
width : 400px;
text-align : left; /* pour résoudre le bug de centrage sous IE5 et IE6-7 en mode Quirks */
}Note 1 : Vu qu'un élément bloc occupe par défaut la totalité de
la largeur disponible, ce code n'a pas d'effet si vous ne spécifiez pas
de largeur à votre bloc à centrer grâce à la propriété width.
Note 2 : Les tableaux s'adaptant à leur contenu, leur largeur
peut ne pas occuper tout l'écran même si vous ne définissez pas de largeur.
Ainsi, vous n'êtes pas obligé d'imposer une largeur pour centrer un
tableau avec cette technique.
La propriété vertical-align permet d'aligner un élément inline verticalement par rapport à la hauteur d'une ligne de texte (line-height), celle-ci dépend de la taille de police de caractère (font-size) et de l'espace réservé pour afficher la partie basse des caractères "j", "g", "p", "q", "y", "z" (qui dépend de la police de caractère).
Les valeurs de vertical-align sont :
- top : Aligne le haut de l'élément avec le haut de son parent,
- bottom : Aligne le bas de l'élément avec le bas de son parent,
- baseline : La valeur initiale, aligne l'élément sur la ligne de base,
- middle : Aligne l'élément au milieu de la ligne de base,
- super : Aligne l'élément au-dessus de la ligne de base et l'affiche comme indice supérieure,
- sub : Aligne l'élément en-dessous de la ligne de base et l'affiche comme indice inférieure,
- text-top : Aligne l'élément en haut de la ligne de base de son parent,
- text-bottom : Aligne l'élément en bas de la ligne de base de son parent.
Il existe quelques méthodes pour centrer verticalement un élément block, les plus importantes sont :
Le positionnement absolute : (Comment positionner un élément en absolute ?)
Si l'élément a une taille fixe, il est possible de le centrer verticalement par rapport à son conteneur :
#parent {
position : relative;
width : 500px;
height : 500px;
border : 1px solid red;
}
#enfant {
position:absolute;
top: 50%; /* top = 50% pour centrage vertical */
left: 50%; /* left = 50% pour centrage horizontal */
width : 200px;
height : 200px;
margin-top: -100px; /* margin-top = - height/2 */
margin-left: -100px; /* margin-left = - width/2 */
border : 1px solid green;
}<div id="parent">
<div id="enfant">
Un bloc positionné au milieu de son parent positionné en relatif
</div>
</div>Simuler le comportement d'une cellule de tableau grâce à la propriété display :
Les spécifications CSS2 ont enrichi
la propriété display avec des nouvelles valeurs possibles.
Parmi ces valeurs on trouve table-cell qui permet à un élément de se comporter comme une cellule de tableau, ce qui
ne pose aucun problème pour aligner ses enfants verticalement grâce à la propriété vertical-align :.
#parent {
height : 500px; /* Height se comporte comme un min-height pour un élément de rendu table-cell */
border : 1px solid red;
display : table-cell;
vertical-align : middle;
}
#enfant {
border : 1px solid green;
}<div id="parent">
<div id="enfant">
Un bloc positionné au milieu de son parent.
</div>
</div>
Malheureusement, Internet Explorer 7 et inférieures ne reconnaissent pas la valeur table-cell.
On peut utiliser le positionnement absolu couplé à expression() CSS de Microsoft afin d'aboutir à un résultat
satisfaisant.
<!--[if lte IE 7]>
<style type="text/css" media="screen">
#parent {
position:relative;
width:expression(this.childNodes[0].offsetWidth+"px");
}
#enfant {
position:absolute;
top:50%;
margin-top:expression(-this.offsetHeight/2);
}
</style>
<![endif]-->Il faut utiliser les marges en CSS (margin-xxx), qui peuvent être appliquées aux 4 côtés :
- top : haut
- bottom : bas
- right : droite
- left : gauche
Code CSS relatif au décalage vers la droite :
.decalage {
margin-left : 50px
}Utilisation du CSS précédent dans la page (X)HTML :
<div class="decalage">Mon bloc décalé de 50 pixels vers la droite</div>Note : Les marges peuvent être appliquées à n'importe quel élément.
Pour cela, il faut utiliser la propriété float qui retire partiellement l'élément du flux normal par rapport à son conteneur parent.
Exemple de code XHTML, avec l'image à gauche, le texte à droite :
<img class="maclasse" src="image.jpg" />
Du texte
<br />
À droite de l'image !Et le CSS qui va avec :
.maclasse {
float : left;
}Note : En float : right, l'image sera positionnée à droite et le texte à sa gauche.
On utilise la propriété z-index en CSS, pour positionner des blocs l'un au dessus de l'autre, ici des images. Il faut également positionner les images en position absolue.
Code XHTML, où l'image 1 est en dessous de l'image 2 :
<img src="image1.jpg" class="imagedessous" />
<img src="image2.jpg" class="imagedessus" />CSS correspondant :
.imagedessous {
position : absolute;
z-index : 1;
}
.imagedessus {
position : absolute;
z-index : 2;
}Note : Plus le z-index est élevé, plus l'image sera placé au dessus (plusieurs niveaux).
Pour positionner un élément en absolute, il suffit d'attribuer la propriété position avec la valeur absolute.
Par ailleurs, un élément positionné en absolute a comme référent son premier conteneur
positionné en relative, absolute ou fixed si aucun des conteneurs n'est positionné,
le navigateur a le choix de se référer à l'élément racine HTML ou à la zone de
visualisation.
Exemple :
Le code CSS
#parent {
position : relative;
width : 500px;
height : 500px;
border : 1px solid red;
}
#enfant {
position:absolute;
top: 0;
left: 0;
width : 200px;
height : 200px;
border : 1px solid green;
}Le code XHTML
Un élément positionné en relatif garde sa position dans le flux normal et peut être décalé sans impacter les éléments adjacents.
#mon-element {
position : relative;
top : -5px;
left : -3px;
}