Alignement vertical d'un texte et d'une image

**tom42** · 24/01/2008, 17h36

Bonjour,
Je n'arrive pas à aligner verticalement une image et un texte dans une même cellule de tableau. Voila ce que je fais.

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
20
21
22
23
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Alignement vertical</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
    <style type="text/css">
        .col{
            background-color : #C7C7C7;
            vertical-align : middle;
        }
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td class="col"> 
            <img src="_medias/imageBlock.gif" />Texte..
        </td>
    </tr>
    </table>
</body>
</html>

et le texte est aligné par le bas.
A noter qu'avec valign="middle" appliqué directement sur la balise <td> ça ne marche pas non plus.

**pop_up** · 24/01/2008, 17h52

j'ai testé ça :

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
20
21
22
23
24
25
26
27
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <title>Alignement vertical</title>
    <meta http-equiv="Content-Type" content="text/HTML; charset=utf-8" />		
    <style type="text/css">
        p.texte { 
            line-height: 1em;
            }
        p.texte img, span {
            vertical-align: middle;
            }
 
 
    </style>
</head>
<body>
    <table cellspacing="0" cellpadding="0" border="1">
    <tr>
        <td class="col"> 
            <p class="texte"><img src="tonimage.gif" /><span>Texte</span></p>
        </td>
    </tr>
    </table>
</body>
</html>

je pense que ça correspond à ce que tu veux

EDIT: et meme en enlevant le line-height ça marche aussi.

**tom42** · 24/01/2008, 18h00

Oui c'est bien ça.
En fait mes éléments étaient bien centrés dans la cellule, mais c'est entre eux qu'il y avait un problème.
Merci beaucoup.

Alignement vertical d'un texte et d'une image

Positionnement en CSS

Discussions similaires

Partager

Partager