Centrage Vertical

Menu "Centrage"

EXEMPLES

texte centré verticalement dans mozilla / opéra, et Internet Explorer. La table (tableau) a une hauteur pré-fixe (ici 200 pixels)

Boite1 : texte centré verticalement dans mozilla / opéra, et Internet Explorer. La boite à une hauteur variable, mais ne peut contenir qu'un paragraphe


Boite2 : texte centré verticalement dans mozilla / opéra, et Internet Explorer.

La boite à une hauteur variable, et peut contenir plusieurs paragraphes


CODE SOURCE CSS ET HTML

<html>
<head>
<style type="text/css">

table { /* le style qui suit s'applique à toutes les tables (tableau) de la page */
vertical-align:center} /* centre verticalement. Fonction marchant dans les tables uniquement */

.boite {border: 5px outset ; /* style de la bordure */
width:300px ; /* largeur de la boite */
text-align:justify} /* le texte dans la boite est double justifié */

.boite p { /* ne s'applique qu'aux paragraphes (balise <p>) contenus dans ".boite" */
margin-top:50px ; /* insère un espace de 50 pixels au dessus du paragraphe */
margin-bottom:50px}/* insère un espace de 50 pixels au dessous du paragraphe */

.boite2 { /* 2ième exemple de boite */
border: 5px outset ; /* style de la bordure */
width:350px ; /* largeur de la boite */
text-align:justify ; /* le texte dans la boite est double justifié */
padding-top:50px ; /* insère un espace de 50 pixels au dessous du haut de la boite*/
padding-bottom:50px} /* insère un espace de 50 pixels au dessus du bas de la boite*/

</style>
</head>

<body>

<!-- exemple8-->
<table class="centrage" width="30%" height="200px" border="2">
<tr>
<td>texte centré verticalement dans mozilla / opéra, et Internet Explorer.
La table (tableau) a une hauteur pré-fixe (ici 200 pixels)</td>
</tr>
</table><br>

<!-- exemple9-->
<div class="boite"><p>Boite1: texte centré verticalement dans mozilla / opéra, et Internet Explorer.
La boite à une hauteur variable, mais ne peut contenir qu'un paragraphe</p>
</div><br>

<!-- exemple10-->
<div class="boite2">
<p>Boite2: texte centré verticalement dans mozilla / opéra, et Internet Explorer.</p>
<p>La boite à une hauteur variable, et peut contenir plusieurs paragraphes</p>
</div>

</body>
</html>

 

Pour tester ce script

 

COMMENTAIRES

On a vu le centrage vertical d'une boite dans une page, le centrage horizontal d'un tableau, d'une boite ou d'un texte dans une page. Voyons maintenant le centrage vertical d'un texte dans une boite.

Il existe une fonction vertical-align:center, mais elle ne marche que dans les tables, pas dans les boites. C'est l'exemple 8. Elle peut être utilisée sur un tableau de hauteur fixe (en pixel) ou de hauteur adaptable (en pourcentage).

Pour les boites, on peut insérer de plusieurs façons des espaces en bas et en haut de la boite, donnant l'illusion d'un centrage. Ce sont les exemples 9 et 10. Mais ce n'est pas un vrai centrage, cela en donne seulement l'apparence.

Pour centrer une texte verticalement dans une boite de hauteur pré-fixe (en pixels), je ne sais pas comment faire. Si vous avez une idée qui passe dans tous les navigateurs modernes, publiez-la ici.