Aligner verticalement une image et du texte

Salut,

Je souhaiterais aligner verticalement une image et du texte (qui correspondent à un titre et son icône), en utilisant CSS si possible.

J'ai essayé des trucs avec "vertical-align:middle;"sans aboutir à quelque chose qui marche. Pour l'instant, je me suis donc rabattu sur une solution avec un tableau à 2 colonnes :

Code:

---

1 2 3 4 5 6

<table> <tr> <td><img src="/icone.jpg" /></td> <td>Mon titre</td> <tr> </table>

---

Ca marche, mais je pense qu'il serait plus "propre" d'utiliser une solution sans tableau. Qu'en pensez-vous? Vous savez comment je peux faire ça?

Merci d'avance pour votre aide

Verticalement entre eux seulement ou verticalement dans un conteneur de hauteur fixe en sus ?

Entre eux seulement : je souhaiterais que le texte soit affiché à mi-hauteur de l'image, et non pas en bas (ce qui est le comportement naturel).

Il faut alors mettre vertical-align:middle sur l'image.

Bonjour,

Pourquoi n'essaierais-tu pas avec l'image en arrière-plan ?

Avec une height et une line-height identiques et un padding pour éloigner le texte, ça devrait marcher.

Par exemple

Code:

---

1 2	<h1>Un titre avec une image à gauche</h1>

---

avec

Code:

---

1 2 3 4 5 6 7 8

h1 { height : 80px; line-height : 80px; padding-left : 80px; background : #000 url(pucetitre.png) no-repeat 10px center; /* L'image ferait 60x60 */ }

---

Merci à tous .

Finalement, j'ai opté pour la solution de Bisûnûrs (car l'image est variable donc je ne peux l'intégrer dans du CSS), mais celle de GihefBey doit bien marcher aussi.