[Solved]Centrer du texte par rapport a une image de fond

Bonjour

Il me semblait que c'était automatique si on déclarait bien les cotes de l'image.

Puis j'ai lu un truc sur le vertical-align mais sa définition ne semble pas correspondre à une image en backgroud.

Voyez plutot: http://www.cyberbreizh.com/wip/test/normal/

Comme on peut le constater le texte des boutons des menus n'est pas centré verticalement. Et le bouton "Accueil" (qui a un id particulier pour un background particulier) est également décalé vers la droite.

-edit- J'ai oublié le code...

HTML

<div id="menu">
<ul id="nav">
<li><a href="forum.php" id="forum">Forum</a></li>
<li><a href="cyber.php">Cybercafé</a></li>
<li><a href="labo.php" id="labo">Laboratoire</a></li>
<li><a href="atelier.php" id="Matériel">Atelier</a></li>
<li><a href="index.php" id="accueil">Accueil</a></li>
</ul>
</div> 

CSS

ul#nav
			{	
			height: 24px;
			margin-top: 10px ;	
			list-style-type: none ;
			background: black;
			}

			ul#nav li
					
				{
				float: right ;
				text-align: center ;
				background: url(pix/frontbar.gif) no-repeat ;
				display: block ;
				width: 113px;
				height: 23px;
				}


				ul#nav li a	
									
						{
						width: 130px ;
						color: white ;
						text-decoration: none ;
						}

						ul#nav li a:hover, #nav li a:focus, #nav li a:active
						{
						color: #EDEBCA;
						text-decoration: underline ;
						}
						#accueil  {
		
							text-align: center ;
							background: url(pix/accueil.gif) no-repeat  ;
							display: block ;
							width: 113px;
							height: 24px;
							}

Modifié par xis (01 Aug 2007 - 17:20)

line-height:23px ou 24px pour centrer verticalement ton texte

Sur la plupart des éléments, vertical-align permet de positionner un élément de type en-ligne ou un caractère sur la ligne de texte (ou, pour être très précis, et si je ne m'abuse: sur la boite de ligne).

La propriété vertical-align ne permet de positionner le contenu d'un élément par rapport à l'élément lui-même que dans le cas où cet élément a un affichage de type table-cell: c'est à dire pour les cellules de tableau et les autres éléments dotés de la propriété display:table-cell.

Pour ce que tu veux réaliser, jouer sur line-height + vertical-align est effectivement une possibilité. Pour ma part, je préfère faire quelque chose du genre:

padding: 10px 0;
background-position: left center;

Meric à vous deux, je teste =)

-Edit- Bon c'est parfait, les deux solutions fonctionnent =)) En ajustant pour celle de Flo le padding.

Néanmoins ca ne résoud pas le problème du décalage vers la droite du texte du premier bouton. :X
Modifié par xis (31 Jul 2007 - 18:52)

xis a écrit :
Néanmoins ca ne résoud pas le problème du décalage vers la droite du texte du premier bouton. :X

Tu as un li de 113px de large et un a de 130px. Le a déborde du li sur la droite, et le texte est centré dans le a. Donc le texte est décalé de 130-113/2 = 8.5px vers la droite.

CQFD.

grmbl... merci Florent =)