Bonjour à tous,
je me suis mis hier aux Div (j'ai passé l'après midi à refaire un truc que j'avais fais en 5mn avec un tableau ...)
 
Et il reste un truc que je ne réussis pas à faire: aligner verticalement un texte dans un Div de petite taille.
 
Je m'explique:
si on utilise du 'gros' texte dans un div sans préciser sa hauteur
<div style=" background-color: #00ff00; margin:30px;">
 <p align="center" style="font-size:150%">du texte</p>
</div>
Pas de problème le texte est centré verticalement.
 
 
par contre si on veux choisir la hauteur du div (parcequ'on à un background précis par exemple)
<div style="height:40px; background-color: #00ff00; margin:30px; ">
 <p align="center" style="font-size:150%">du texte</p>
</div>
ca marche pas !!!  
 
Bon alors j'ai essayé pas mal de truc (vertical-align, padding, marging-top ...) mais j'ai rien trouvé qui marche à la fois avec IE et Mozilla ... Grrrr
 
Si quelq'un connais la réponse ca serais cool (sinon j'vais être obligé de continuer à utiliser des tableaux pour ce truc ...)
 
 
 

http://incongru.webdynamit.net/VerticalAlign

Merci pour ta réponse,
Ca marche avec position : relative dans un cas
 
<div style="height:50px;  background-color: #00ff00;  text-align: center; vertical-align:middle;">
 <p align="center" style="position: relative; top: 10px; font-size:150%;">du texte</p>
</div>
 
Par contre, si on passe le bloc conteneur en float (comme c'est mon cas) c'est la cata ... :
 
<div style="height:50px;  background-color: #00ff00;  text-align: center; vertical-align:middle;">
 <p align="center" style="position: relative; top: 10px; font-size:150%;">du texte</p>
</div>
 
si on ne précise pas la position du texte Mozilla aligne le texte vers le bas et IE vers le haut donc impossible d'utiliser position : relative !    
 
bref retour au poins de départ !!!
c'est vraiment merdique la gestion des alignements avec les divs ! tu parle d'un standard , les tableaux c'est peu être pas élégant mais au moins tu peux faire des alignements dynamiques ...

disons que ce que tu veux faire, c'est standard. C'est la façon dont IE le gère qui ne l'est pas.

 
Oui mais malheureusement c'est IE qui est leader du marché donc je suis obligé d'avoir un résultat 100% compatible IE en prioritè ...
 
Pour que les standards se répandent ils faut qu'ils puissent s'appliquer aux outils majoritaires et c'est malheureusement pas le cas ...
 
Bon pour finir, je pense que je vais essayer d'utiliser au maximum les div et dans les cas ou ce n'est pas possible reprendre la vieille sauce tabulaire ...
 

 
Peut etre remplacer par
 

 
 
Merci !!!
Ce n'étais pas exactement ça, mais ça m'à permis de trouver la solution :
 
<div style="height:47; width:47px; float: left; " >
  <div style="font-size:150%; padding:10px; background-image:url(img/toto.jpg);  text-align:center;">t</div>
</div>
 
En gros je fixe la taille de la cellule dans le conteneur (qui est flottant) puis je centre/rêgle la taille de l'image dans l'autre cellule qui contiend le texte.
C'est un peu bizare, à la louche et bidouillé mais ca marche sur IE et Mozilla!
 
merci à tous