Vertical-align pas d'effet sous IE ou FF ???

Bonjour,

Un petit problème avec vertical-align qui ne marche pas.

#header
{
	margin:0 0 0 20px;
	padding:0;
	width:100%;
	height:150px;
	background:#f2f2f2;
	vertical-align:text-bottom;

}

ma balise div

<div id="header" >
<h1>header</h1>
</div>

j'ai fait une petite recherche mais j'ai l'impression que personne n'a de problème avec cette fonction.
Cependant quand je l'utilise le texte reste collé en haut.

Merci d'avance pour vos réponses. (ou vos questions si ce topic n'est pas assez complet )

David.

EDIT: la balise h1

h1
{
	margin:0;
	padding:0 0 0 10px;
}

Modifié par Davee (06 Aug 2009 - 14:01)

Salut,

Un petit complément d'information pour toi sur le fonctionnement de cette propriété :
Le vertical-align ne sert à pas centrer verticalement un élément dans un autre, mais à centrer deux éléments inline entre eux. A l'exception évidemment des éléments qui ont le display table-cell et qui peuvent alors utiliser cette propriété pour centrer des éléments enfants verticalement en eux.

A ta place, j'aurais plutôt fait ça :

#header  { 
    margin: 0 0 0 20px; 
    padding: 0; 
    width: 100%; 
    height: 150px; 
    background: #f2f2f2; 
    position: relative;
 
}

h1 {
    position: absolute;
    bottom: 0;
    margin:0; 
    padding:0 0 0 10px; 
}

A essayer !

Ha d'accord, je comprends mieux maintenant. Merci Agylus.
teddyhennart : je vais voir avec ta proposition. merci.

Modifié par Davee (06 Aug 2009 - 20:51)

Salut,

la solution de teddyhennart devrait fonctionner.

A noter qu'il faudrait supprimer le width: 100%; puisqu'un élément de type bloc prend déjà toute la largeur disponible et que cela risque de poser problème dans IE6. De plus c'est une bonne habitude de spécifier également left:0; en plus du bottom:0 sur les éléments en position absolue car sans cela IE < 8 peut avoir des soucis.

Heyoan a écrit :

A noter qu'il faudrait supprimer le width: 100%;

Autant pour moi, à vrai dire, j'ai fait un copier-coller du code sans y faire très attention ! Je tâcherai de faire mieux la prochaine fois

teddyhennart: Y a pas de mal, je pense que le conseil de Heyoan s'adressait certainement plus à moi .

Ton code marche bien. C'est génial merci beaucoup