Alignement vertical dans un div (img + texte) marche pas !

**MuLog** · 19/06/2009, 19h37

Bonjour,

malgré différentes tentatives, comme le vertical-align: middle; je n'arrive pas à centrer verticalement mon image avec mon texte sur la même ligne.
Voici le code résumé :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
<html>
  <head>
    <style type="text/css">
      div.contenu { vertical-align: middle; }  
    </style>               
  </head>
  <body>
   <div class="contenu">
      <img src="img.jpg" height="40" width="40">texte
   </div>
  </body>
</html>

Le texte reste collé en bas... il ne veut pas se remonter au milieu de l'image de gauche...
quelqu'un a une idée ?

Merci !

PS : en imagé si on considère les //// comme mon image, je voudrais ça :
//////
////// texte
//////

et non pas ça :
//////
//////
////// texte

Invité · 19/06/2009, 20h22

Le plus simple est de mettre tes images et ton texte dans un tableau, ce qui donne:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<html>
<head>
<styletype="text/css">
div.contenu { vertical-align: middle; } 
</style>
</head>
<body>
<divclass="contenu">
<tableborder="0">
<tr>
<td><imgsrc="img.jpg"height="40"width="40"></td>
<td>texte</td>
</tr>
</table>
</div>
</body>
</html>

**Erwan31** · 19/06/2009, 20h42

Envoyé par yroubag

Le plus simple est de mettre tes images et ton texte dans un tableau, ce qui donne:

Oui mais un tableau n'est pas fait pour faire de la mise en forme

La propriété vertical-align ne s'applique qu'aux éléments inline et aux éléments de type table-cell (td).
Tu dois donc l'appliquer directement à l'image (voire aussi sur le texte pour le centrer par rapport à son centre vertical et non par rapport à sa ligne de base).

Ce qui donne

Code :

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

1
2
3
4
5
6
7
8
    <style type="text/css">
      div.contenu img, div.contenu span {vertical-align: middle;}  
    </style>               
  </head>
<body>
 <div class="contenu">
     <img src="forum.png" height="100" width="100"><span>texte</span> </div>
</body>

PS: ne pas oublier l'attribut alt sur l'image(même vide)

**MuLog** · 19/06/2009, 21h00

great !

merci Erwan

**Geff_33** · 02/02/2011, 11h57

Super et merci Erwan !
Cela faisait longtemps que je butais sur cette mise en page d'un alignement vertical d'une image et d'un texte.
Voici le code que j'utilise maintenant avec le style directement appliqué à l'image et au texte:

Code :

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

1
2
3
4
<div style="line-height:25px; vertical-align:middle;">
<img style="vertical-align:middle;" src="../images/flechedroite.png" />
<span style="vertical-align:middle; font-size:9px;">Visualiser</span>
</div>

Alignement vertical dans un div (img + texte) marche pas !

Positionnement en CSS

Discussions similaires

Partager

Partager