Problème pour centrer verticalement dans un tableau

Version imprimable

Bonjour,

dans une cellule de tableau, j'aimerais centrer verticalement une puce (format gif), du texte et une autre image.
J'ai essayé avec "valign" puis "vertical-align" (en CSS) mais rien n'y fait.

Voici un bout de code :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
<center>
	<TABLE width='599' border='1' cellspacing='0' cellpadding='0'>
		<TR>
			<TD width='100'>&nbsp;</TD>
			<TD align='left'>
                                <IMG src='IMAGES/puce.gif'>Mon texte
				<A href='monlien.doc' type='application/msword'>
				      <IMG src='IMAGES/icone-doc.gif' border='0' alt='DOC'>
                                </A>
                        </TD>
                 </TR>
	</TABLE>
</center>

Merci d'avance !
@+

Code:

1
2
3
4
5
6
7
8
9
<TABLE width='599' border='1' cellspacing='0' cellpadding='0'>
	<TR>
		<TD width='100' height='200'>&nbsp;</TD>
		<TD style="text-align:center;vertical-align:middle;"><IMG src='IMAGES/puce.gif'>Mon texte
			<A href='monlien.doc' type='application/msword'>
			      <IMG src='IMAGES/icone-doc.gif' border='0' alt='DOC'>                                </A>
                    	</TD>
                 </TR>
</TABLE>

Modofié en 200px de haut pour bien voir le centrage en hauteur.

17/07/2006, 14h35
navis84

L'ensemble texte/images est bien centré, par contre, le texte n'est pas centré verticalement par rapport aux deux images. Comment faire ?
17/07/2006, 14h59
navis84

J'ai aussi testé en encadrant le texte et images d'un <div valign='center'></div>.... sans effet.:roll:
17/07/2006, 16h34
MasterOfChakhaL
si tu veux faire apparaitre des puces, je te conseille d'utiliser des listes à puces...
Code:

1 2 3 4 5 <ul> <li><a ...>klbke</a></li> <li><a ...>kedsdfiezf</a></li> </ul>
tu pourras insérer la puce grâce à la propriété css
Code:

1 2 3 4 li { list-style-image: url(puce.png); }
pour centrer tes images, il faut bien utiliser vertical-align.
mais puisque c'est pour centrer les images, il faut l'appliquer aux images, non pas à toute la cellulle...

par exemple (CSS)
Code:

1 2 3 4 table li img { vertical-align: middle; }
17/07/2006, 16h57
navis84

Super ! Ca marche super bien ! Merci beaucoup. :D
17/07/2006, 17h00
navis84

Par contre, un truc que je viens de voir, comment faire pour centrer la puce elle aussi verticalement ?
17/07/2006, 17h04
MasterOfChakhaL

peut être en utilisant la propriété marker-offset (je n'ai pas essayé)...

en tout ca, si tu ne t'en sors pas avec les listes à puces (c'était juste un conseil...) tu connais maintenant la solution pour centrer les images sur une ligne de texte. Donc, rien ne t'empêche de passer par un shéma du type

Code:

<img ... /><a ...><img ... /></a>
17/07/2006, 17h07
navis84

C'est parfait avec cette méthode. Merci beaucoup MasterOfChakhaL ! :wink:
17/07/2006, 17h23
MasterOfChakhaL

Je t'en prie...

C'est à ça que sert le forum. Et puis ça m'a appris quelques propriétés sur les listes que je ne connaissais pas...

Youpi, tout le monde il est content
18/07/2006, 16h56
navis84

C'est magnifique alors ! :D