[Résolu] Alignement Vertical

Bonjour, j'aimerais aligner le texte verticalement centré dans le code suivant qui donne ceci :

http://img219.imageshack.us/img219/6352/exrt1.jpg

<div id="navigation">
			<table width="100%" cellspacing="0">
			<tr>
				<td class="genmed">
					<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/connect.png" width="16" height="16" alt="Logout [ Theberge43 ]" />&nbsp;<a href="./ucp.php?mode=logout">Logout [ Theberge43 ]</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/email_go.png" width="16" height="16" alt="Private Messages" />&nbsp;<a href="./ucp.php?i=pm&amp;folder=inbox"><strong>1</strong> new message</a>				</td>

				<td class="genmed" align="right">&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/house.png" width="16" height="16" alt="Portal" />&nbsp;<a href="./portal.php">Portal</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/comments.png" width="16" height="16" alt="Forum" />&nbsp;<a href="./index.php">Forum</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/help.png" width="16" height="16" alt="FAQ" />&nbsp;<a href="./faq.php">FAQ</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/zoom.png" width="16" height="16" alt="Search" />&nbsp;<a href="./search.php">Search</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/group.png" width="16" height="16" alt="Members" />&nbsp;<a href="./memberlist.php">Members</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/user_edit.png" width="16" height="16" alt="User Control Panel" />&nbsp;<a href="./ucp.php">User Control Panel</a></td>
			</tr>
			</table>
		</div> <!-- Fermeture navigation -->	

Modifié par Theberge43 (05 Jan 2007 - 21:22)

salut !

je pense que tu peux utiliser la proprieté line-height pour que tes liens soient de la meme hauteur que ta ligne.

essaie display:block; et line-height:15px; (par exemple) sur tes balises <a>

++

Je pense qu'un simple line-height sur le td devrait faire l'affaire.
> http://wiki.media-box.net/tutoriaux/html/faq#comment_centrer_un_texte_verticalement_dans_une_boite

Un beau jour, la consultation de la FAQ sera peut-être un reflexe qui facilitera tellllllement les choses

Ah ben tiens, je l'avais pas vu dans ta FAQ...

Antoine Cailliau a écrit :
Ah ben tiens, je l'avais pas vu dans ta FAQ...

Et pourtant il fait partie des 1ers points qui y ont été ajoutés... vu le nombre de fois que cette question est posée

La propriété vertical-align attribuée à la cellule est je pense plus
appropriée dans ce cas et un line-height contrairement au height est
aussi applicable sur les éléments inline donc pas besoin
d'un display:block.
Modifié par Hermann (05 Jan 2007 - 13:22)

J'apprécie vraiment le fait que vous m'écorchiez au passage, mais voici la différence lorsque j'ajoute un line-height de 25px.

http://img170.imageshack.us/img170/2080/exqr0.jpg

http://img169.imageshack.us/img169/9619/ex2uu8.jpg

Ça ne fonctionne pas et voici le code :

		<div id="navigation">
			<table width="100%" cellspacing="0">
			<tr>
				<td class="genmed" nowrap="nowrap" style="line-height: 25px;">
					<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/connect.png" width="16" height="16" alt="Logout [ Theberge43 ]" />&nbsp;<a href="./ucp.php?mode=logout">Logout [ Theberge43 ]</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/email_go.png" width="16" height="16" alt="Private Messages" />&nbsp;<a href="./ucp.php?i=pm&amp;folder=inbox"><strong>1</strong> new message</a>					&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/cog_edit.png" width="16" height="16" alt="Logout [ Theberge43 ]" />&nbsp;<a href="./adm/index.php?&amp;sid=77a00f5d7c24aeb6bf9f96ba9a1c79ee">Administration Control Panel</a>

									</td>
				<td class="genmed" align="right" nowrap="nowrap" style="line-height: 25px;">&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/house.png" width="16" height="16" alt="Portal" />&nbsp;<a href="./portal.php">Portal</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/comments.png" width="16" height="16" alt="Forum" />&nbsp;<a href="./index.php">Forum</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/help.png" width="16" height="16" alt="FAQ" />&nbsp;<a href="./faq.php">FAQ</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/zoom.png" width="16" height="16" alt="Search" />&nbsp;<a href="./search.php">Search</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/group.png" width="16" height="16" alt="Members" />&nbsp;<a href="./memberlist.php">Members</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/user_edit.png" width="16" height="16" alt="User Control Panel" />&nbsp;<a href="./ucp.php">User Control Panel</a></td>
			</tr>
			</table>
		</div> <!-- Fermeture navigation -->		

Pour la propriété vertical-align, ça ne fonctionne pas plus.
Modifié par Theberge43 (05 Jan 2007 - 14:50)

Dans la seconde image, le texte est aligné :?

Non je n'ai pas changé l'alignement ...

J'essaie avec toutes les propriétés d'alignement que je connais, mais ça ne veux pas fonctionner ...
Modifié par Theberge43 (05 Jan 2007 - 15:53)

Pourtant
> http://antoine.media-box.net/wiki/tableau-centre.html

Pourtant
http://img170.imageshack.us/img170/2080/exqr0.jpg

<div id="navigation">
			<table width="100%" cellspacing="0">
			<tr>
				<td height="16px" class="genmed" nowrap="nowrap" style="line-height: 100%;">
					<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/connect.png" width="16" height="16" alt="Logout [ Theberge43 ]" />&nbsp;<a href="./ucp.php?mode=logout">Logout [ Theberge43 ]</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/email_go.png" width="16" height="16" alt="Private Messages" />&nbsp;<a href="./ucp.php?i=pm&amp;folder=inbox"><strong>1</strong> new message</a>					&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/cog_edit.png" width="16" height="16" alt="Logout [ Theberge43 ]" />&nbsp;<a href="./adm/index.php?&amp;sid=77a00f5d7c24aeb6bf9f96ba9a1c79ee">Administration Control Panel</a>

									</td>
				<td align="right" height="16px" class="genmed" nowrap="nowrap" style="line-height: 100%;">&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/house.png" width="16" height="16" alt="Portal" />&nbsp;<a href="./portal.php">Portal</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/comments.png" width="16" height="16" alt="Forum" />&nbsp;<a href="./index.php">Forum</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/help.png" width="16" height="16" alt="FAQ" />&nbsp;<a href="./faq.php">FAQ</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/zoom.png" width="16" height="16" alt="Search" />&nbsp;<a href="./search.php">Search</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/group.png" width="16" height="16" alt="Members" />&nbsp;<a href="./memberlist.php">Members</a>&nbsp;&nbsp;<img onload="fixPNG(this)" src="./styles/QcFL2/theme/images/user_edit.png" width="16" height="16" alt="User Control Panel" />&nbsp;<a href="./ucp.php">User Control Panel</a></td>
			</tr>
			</table>
		</div> <!-- Fermeture navigation -->	

Ca vient d'ailleur chez toi
> http://antoine.media-box.net/wiki/Theberge43.html

Des images peut-être !?
J'aimerais bien comprendre ...

Met simplement une margin-bottom négatif sur les images ?
Modifié par CNeo (05 Jan 2007 - 19:43)

Ça marche Nickel ! Merci bien !!!

De rien. N'oublie pas de mettre le [Résolu].
Modifié par CNeo (05 Jan 2007 - 20:12)

En fait fausse victoire ... cela fonctionne sur FF mais non sous IE 6

Ok oubliez cela, j'ai réglé le problème dans IE 6.
C'était plutôt la façon dont je l'avais écrit dans mon CSS que IE 6 n'aimait pas.

CNeo a écrit :
Met simplement une margin-bottom négatif sur les images ?

Peut être qu'avec une propriété vertical-align: center; sur les image c'est plus propre. Je ne sais pas, à tester