28221 sujets

CSS et mise en forme, CSS3

Je souhaiterais tout simplement centrer verticalement un texte dans une balise div...

Sous Ie, la technique du line-height auquel on donne la même valeur que le height marche... ainsi que sous opéra d'ailleurs. Mais elle ne fonctionne pas sous firefox.

Sous ce dernier navigateur, on pourrait utiliser l'autre technique de "centrage de texte": vertical-align allié à un display: cell... mais cette technique ne fonctionne pas lorsque le bloc est en float.....

Donc en gros, avec un bloc qui est en float, je n'arrive pas à centrer un texte à la verticale sous firefox...
Bonjour Smiley cligne et bienvenue dans ce forum.

J'ai supprimer ton message identique à celui-ci dans le salon html, xhtml. Ce n'est pas nécessaire de poster dans plusieurs salons à la fois, il y a bien quelqu'un qui va voir ton problème.
Comme c'est ton premier post je t'invite à vérifier que tu as bien pris connaissance des Règles du forum et si le coeur t'en dit à venir te présenter dans le bar du forum. Smiley cligne
Administrateur
Martin.P a écrit :

Sous Ie, la technique du line-height auquel on donne la même valeur que le height marche... ainsi que sous opéra d'ailleurs. Mais elle ne fonctionne pas sous firefox.


Tu es bien sûr de toi ?
Tu veux bien tester :
HTML :
<div id="conteneur">
Un texte centré
</div>

CSS :
div#conteneur {
background: yellow;
height: 80px;
line-height: 80px;
width: 300px;
}


Chez moi cela fonctionne très bien sous Firefox 1.0

EDIT : bonjour à toi aussi, merci, de rien, etc. Smiley cligne
Merci pour vos réponses et, en effet, Raphaël, après "testage" sous firefox, le texte s'affiche bien centré. Mais à une petite exception près qui m'a mis en erreur: c'est lorsque, une fois la page affichée, si l'on change la taille de la police dans les options du navigateurs, firefox "décentre" alors le texte vers le bas ou le haut de notre "div" selon que l'on augmente ou baisse la taille de la police...

Par contre, Ie lui affiche toujours le texte au centre. Donc en fait, les deux navigateurs doivent interpréter de façon un peu différente l'application de la syntaxe "line-height"...

Et si je cherche la petite bête... c'est parce que je souhaiterais que ma page s'affiche "convenablement" même après changement de la taille de la police par l'utisliateur une fois la page chargée (genre "ouf, j'eus fatigué des yeux, je vais mettre une police plus grosse pour mieux voir...").

à noter que ce pb de "décentrage sous firefox" n'a pas lieu lorqsue l'on centre un texte avec "vertical-align" dans un tableau... donc y-aurait de toute façon cette solution...