Version complète: sur le forum Webmaster Hub : Vertical-align
Webmaster Hub > Création et exploitation de Sites Internet > Les langages du Net > (X)HTML et CSS
Fruge
Bonjour,

Bon, c'est peut être la fatigue, mais là, je bloque ! wacko.gif

Je veux centrer verticalement un texte dans un <div> :

CODE
<div style="height:100px;width:400px;background-color:#EEEEEE;"><h1>Test</h1></div>


Ca parait tout bête, mais là, je ne vois pas ! J'ai essayé le "vertical-align:..." qui marche bien d'habitude (enfin, quand je l'utilise pour un élément d'un tableau....) ; mais là, pour le div, ca ne marche pas !

Vous avez une idée ?

Fruge
Monique
Bonjour Fruge,

Je te rassure, ce n'est pas la fatigue wink.gif
Centrer un texte ou un bloc verticalement n'est pas si évident.
En effet, l'attribut vertical-align ne permet ni de positionner un texte (ni aucun type de bloc) verticalement dans un bloc.

La solution : utiliser des marges négatives.
Un exemple : Dead Centre si tu affiches le code source de la page, tu verras notamment le style de ces deux blocs
CODE
#horizon        
    {
    color: white;
    background-color: transparent;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 0px;
    width: 100%;
    height: 1px;
    overflow: visible;
    visibility: visible;
    display: block
    }

#content    
    {
    font-family: Verdana, Geneva, Arial, sans-serif;
    background-color: transparent;
    margin-left: -125px;
    position: absolute;
    top: -35px;
    left: 50%;
    width: 250px;
    height: 70px;
    visibility: visible
    }


Un autre exemple sur alsacreations

Voilà, il ne te reste plus qu'à adapter à ta page
B)
Fruge
Merci bien Monique ! wink.gif

J'ai commencé à lire, et je vais voir ce que je peux en tirer... smile.gif

Fruge
Ceci est une version "bas débit" de notre forum. Pour voir la version complète avec plus d'information, la mise en page et les images, veuillez cliquer ici.