Discussion :

[navis84]

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 :

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

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 !
@+

[Tdeny]

Code :

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

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.

[navis84]

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

[navis84]

J'ai aussi testé en encadrant le texte et images d'un <div valign='center'></div>.... sans effet.

[MasterOfChakhaL]

si tu veux faire apparaitre des puces, je te conseille d'utiliser des listes à puces...

Code :

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

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 :

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

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 :

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

1
2
3
4
 
table li img {
  vertical-align: middle;
}

[navis84]

Super ! Ca marche super bien ! Merci beaucoup.