FAQ CSSConsultez toutes les FAQ

Nombre d'auteurs : 17, nombre de questions : 59, dernière mise à jour : 30 mars 2017 

 
OuvrirSommaireTechniquesPositionnement

On peut le faire en CSS grâce au code présenté ci-dessous

Corps de la page (X)HTML
Sélectionnez

<body>
  <div class="centrer">Mon bloc centré horizontalement</div>
</body>
        

Et le code CSS utile au positionnement

 
Sélectionnez

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.

Mis à jour le 18 septembre 2009  par regbegpower, Macmillenium

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.
Créé le 18 septembre 2009  par Macmillenium

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 :

Code CSS pour centrer un bloc de taille fixe verticalement
Sélectionnez

#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;
}
Code HTML correspondant
Sélectionnez

<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 :.

Code CSS pour centrer un élément verticalement via display:table-cell
Sélectionnez

#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;
}
Code HTML correspondant
Sélectionnez

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

Correctif pour display:table-cell sous IE6 et 7
Sélectionnez

<!--[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]--> 
Mis à jour le 8 octobre 2012  par Macmillenium

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 :

CSS correspondant au décalage vers la droite
Sélectionnez

.decalage { 
  margin-left : 50px 
}
        

Utilisation du CSS précédent dans la page (X)HTML :

 
Sélectionnez

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

Mis à jour le 23 janvier 2007  par Jérôme

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 :

 
Sélectionnez

<img class="maclasse" src="image.jpg" />
Du texte
<br />
À droite de l'image !
        

Et le CSS qui va avec :

 
Sélectionnez

.maclasse {
  float : left;
}
        

Note : En float : right, l'image sera positionnée à droite et le texte à sa gauche.

Mis à jour le 18 septembre 2009  par Linaa, Macmillenium

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 :

 
Sélectionnez

<img src="image1.jpg" class="imagedessous" />
<img src="image2.jpg" class="imagedessus" />
        

CSS correspondant :

 
Sélectionnez

.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).

Créé le 23 janvier 2007  par Forum CSS

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

 
Sélectionnez

#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

 
Sélectionnez

<div id="parent">
  <div id="enfant">
    Un bloc positionné en haut à gauche par rapport à son parent positionné en relatif
  </div>
</div>
Créé le 18 septembre 2009  par Macmillenium

Un élément positionné en relatif garde sa position dans le flux normal et peut être décalé sans impacter les éléments adjacents.

Décaler un élément en relatif
Sélectionnez

#mon-element {
  position : relative;
  top : -5px;
  left : -3px;
}
Créé le 18 septembre 2009  par Macmillenium
  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2004 Developpez.com Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.