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.

[navis84]

Par contre, un truc que je viens de voir, comment faire pour centrer la puce elle aussi verticalement ?

[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 :

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

<img ... /><a ...><img ... /></a>

[navis84]

C'est parfait avec cette méthode. Merci beaucoup MasterOfChakhaL !

[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

[navis84]

C'est magnifique alors !