Positionnement d'un texte dans la balise <h1>

Bonjour,

Je me pose régulièrement la même question :

Je tente de designer ma balise <h1> comme ceci : http://www.fabienfs.net/1.jpg.

Mon code CSS :

h1 {
    width: 951px;
    height: 52px;
    clear: both;
    background: url(../images/bg_title.jpg) no-repeat;
    color: #ffffff;
    font-size: 22px;
    font-weight: bold;
    padding: 12px 5px 0 18px;
}

Jusqu'ici tout se passe bien.
Sous IE, Firefox et Chrome il affiche bien la balise h1 avec un background.
Le seul soucis c'est qu'avec Firefox et Chrome, au plus je veux descendre mon texte par rapport à son background avec le padding, au plus il descend tout mon bloc h1...

Ma question est donc : Comment positionner un texte par rapport à son background ? Avec la balise padding ?

Merci,
Bonne aprèm,

Fabien

Yop,

Personnellement plutôt que de placer un background directement sur mon h1 je fais toujours un conteneur (div) qui lui possède un background et qui contient le h1 en question.

Ensuite pour le placement je n'ai plus qu'à jouer avec les padding du dit conteneur

Si tu veux gérer la position verticale du texte par rapport au background, tu peux utiliser la propriété css "line-height".

Avec un line-height:52px, il sera centré verticalement par rapport au background.

Hello,

Désoler pour la réponse tardive, j'ai eu un soucis de mail

Le line-height est une bonne idée, je vais essayer.

Le div dans le h1 est pas mal aussi, mais peux-être moin "propre".

Merci pour vos suggestions