[CSS] Problème de centrage vertical

Bonjour, je suis face à un problème un peu pénible. Je souhaite afficher un titre contenant un logo en fond (à gauche) et par dessus un texte centré horizontalement et verticalement. J'utilise alors un style CSS sur une balise h1. Pas de problème pour centrer le texte horizontalement, ni pour le logo. Par contre, le texte ne veut pas se centrer verticalement. Cependant, si j'utilise un h1 sans style CSS défini, alors le texte est bien centré verticalement ! Pourquoi ?

Se centrer par rapport à quoi? Au logo? à la résolution de l'écran?

Quel que soit ton problème, possible que tu doives ajuster avec une position absolue ou avec un tableau. En l'état, il faut quelques éclaircissements et, pourquoi pas, une copie des ligne de code en cause.

J'ai trouvé une solution mais je vais quand même préciser. Je veux faire un titre dans une boîte avec,à gauche, un logo centré verticalement par rapport à cette boîte et, au milieu, un texte également centré verticalement. Le texte du titre sera dans une balise h1. J'avais donc utilisé un css du type :

Code:

---

1 2 3 4 5

div#EntetePage h1 { background: url(images/logo.gif) left no-repeat; text-align: center; }

---

Lorsque j'utilise h1 (dans un div de classe EntetePage) j'obtiens un texte non centré verticalement. Pourtant, pour un h1 classique, le texte est bien centré verticalement. J'utilise donc :

Code:

---

1 2 3 4 5

div#EntetePage div#Titre { background: url(images/logo.gif) left no-repeat; text-align: center; }

---

Je déclare donc un deuxième div de classe Titre dans le div de classe EntetePage, puis j'utilise alors le titre dans h1. J'obtiens bien un titre centré verticalement. Je suis débutant et je ne comprends pas trop ce phénomène.

Citation:

---

Envoyé par ZeImp

J'ai trouvé une solution mais je vais quand même préciser. Je veux faire un titre dans une boîte avec,à gauche, un logo centré verticalement par rapport à cette boîte et, au milieu, un texte également centré verticalement. Le texte du titre sera dans une balise h1. J'avais donc utilisé un css du type :

Code:

---

1 2 3 4 5

div#EntetePage h1 { background: url(images/logo.gif) left no-repeat; text-align: center; }

---

Lorsque j'utilise h1 (dans un div de classe EntetePage) j'obtiens un texte non centré verticalement. Pourtant, pour un h1 classique, le texte est bien centré verticalement. J'utilise donc :

Code:

---

1 2 3 4 5

div#EntetePage div#Titre { background: url(images/logo.gif) left no-repeat; text-align: center; }

---

Je déclare donc un deuxième div de classe Titre dans le div de classe EntetePage, puis j'utilise alors le titre dans h1. J'obtiens bien un titre centré verticalement. Je suis débutant et je ne comprends pas trop ce phénomène.

---

Oui, il y a plein de trucs bizarres. De façons générale, quand tu veux une spécification particulière, il vaut bieux éviter les balises prédéfinies et créer tes propres balises.

Le plus embêtant est que ce qui est bon pour un navigateur ne l'est pas forcément pour l'autre. C'est d'ailleurs, pour moi, le principal intérêt des feuilles de style CSS: Avec un petit test javascript, on peut charger la feuille de style convenant au navigateur de l'utilisateur, de préférence en les plaçant dans des fichiers externes.

Je vais te donner un petit truc que tu connais peut-être: En superposant 2 ou 3 divs de façon absolue, décalées de 2 ou 3 pixels dans 2 directions, tu peux créer ton titre en relief, en choisissant judicieusement les couleurs. (ton logo également, s'il s'y prête).

Si tu vas voir la page d'accueil de mon site perso, en haut à gauche, le titre "AU MENU :" est composé de cette façon avec 3 divs (couleurs utilisées pour le texte: Ocre, jaune pale et noir).

http://www.w3schools.com/css/tryit.asp?filename=trycss_vertical-align

les différentes valeur pour vertical-align :

Code:

---

1 2 3 4 5 6 7 8 9 10

baseline sub super top text-top middle bottom text-bottom length %

---

comme pour le text-align il faut un conteneur ;)

Salut

Pour centrer un texte et une image de fond verticalement j'utiliserais ceci :

Code:

---

1 2 3 4 5

h1 { background: url(une_image_de_fond.jpg) center; font-size: 2em; line-height: 2em; /* centrer txt verticalement => font-size = line-height */ }

---

Bien sur tu mets la valeurs et l'unité que tu souhaite pour font-size. Mais line-height doit être égale.

Ok, merci pour vos réponses.