Démos des techniques de centrage vertical

Cette page est liée à un tutoriel sur le centrage vertical, publié sur le site Alsacreations.com.

Elle présente le fonctionnement en temps réel de solutions pour centrer verticalement des éléments de tailles variables dans des conteneurs de hauteur fixe ou fluide.

Les techniques exposées sont compatibles avec tous les navigateurs y compris IE7 (IE6 n'est volontairement pas abordé) et n'utilisent ni <table>, ni javascript.

Tutoriel réalisé par BeliG pour Alsacreations.com.

Menu

Centrer verticalement une image de taille variable dans un conteneur de hauteur fixe

Écritures XHTML qui fonctionnent sur tous les navigateurs :

<p> <img src="img.jpg" alt=""/> </p>
<p><span><img src="img.jpg" alt=""/></span></p>
<p>
	<img src="img.jpg" alt=""/>
</p>

Ne fonctionne pas sur IE7 :

<p><img src="img.jpg" alt=""/></p>

Le code CSS :

p { 
background:#ccc; 
width:200px;
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal d'un élément en-ligne */ }

img { 
vertical-align:middle; }

Voir les explications sur le tutoriel | Retour au menu

Centrer verticalement une ligne de texte dans un conteneur de hauteur fixe

Lorem ipsum

<p>Lorem ipsum</p>
p {
background:#ccc; 
width:200px;
height:200px;
line-height:200px; /* centrage vertical */
text-align:center; /* centrage horizontal */ }

Voir les explications sur le tutoriel | Retour au menu

Centrer verticalement plusieurs lignes de texte dans un conteneur de hauteur fixe

Lorem ipsum
Cras mollis, mi ut ullamcorper ornare 

<p> <span>Lorem ipsum <br/> Cras [...]</span> </p>
p {
background:#ccc;
width:200px;
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }

span { 
width:100px; /* largeur de la zone de texte */
padding:10px; /* aération interne de la zone de texte */
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }

Voir les explications sur le tutoriel | Retour au menu

Centrer verticalement un bloc dans un conteneur de hauteur fixe

Kikoo !

Lorem ipsum

Cras mollis, mi ut ullamcorper ornare


<div class="conteneur">
	<div class="bloc">
		<h3>Kikoo !</h3>
		<p>Lorem ipsum [...]</p>
	</div>	
	<span></span>

</div>
div.conteneur {
background:#ccc;
width:200px;
height:200px;
line-height:200px;
text-align:center; /* centrage horizontal */ }

div.bloc {
width:100px; /* largeur du bloc */
padding:10px; /* aération interne du bloc */
border:1px solid #fff;
vertical-align:middle;
display:inline-block;
line-height:1.2; /* on rétablit le line-height */
text-align:left; /* ... et l'alignement du texte */ }

Et pour IE7 seulement, à l'aide des commentaires conditionnels (ou d'autre chose) :

div.bloc { 
display:inline; /* correctif inline-block*/ }

div.conteneur > span { 
zoom:1; /* layout */ }

Voir les explications sur le tutoriel | Retour au menu

Centrer verticalement des blocs dans un conteneur de hauteur fluide

Cras mollis, mi ut ullamcorper ornare
Cras mollis, mi ut ullamcorper ornare

Lorem ipsum
Cras mollis

<div class="conteneur">

	<div class="bloc">
		<p>Cras mollis [...] </p>

	</div>
	
	<div class="bloc">
		<p>Lorem ipsum [...] </p>
	</div>
	
</div>
div.conteneur { 
background:#ccc;
width:400px;
padding:10px; /* espace interne du conteneur */
text-align:center; }

div.bloc { 
padding:10px; /* aération interne des blocs */
margin:0 10px; /* espacement horizontal entre les blocs */
width:100px;
border:1px solid #fff;
display:inline-block;
vertical-align:middle;
text-align:left; /* on rétablit l'alignement du texte */ }

Et pour IE7 :

div.bloc { 
display:inline; /* correctif inline-block */ }

Voir les explications sur le tutoriel