Discussion :

[Flackou]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[Bisûnûrs]

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

[Flackou]

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).

[Bisûnûrs]

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

[GihefBey]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

avec

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 */
      }

[Flackou]

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.