28111 sujets

CSS et mise en forme, CSS3

Centrer verticalement un text sur une image de fond

Bonjour à tous

J'ai un lien qui a une image de fond et je voudrais que le texte du lien se centre verticalement au milieu de l'image de fond.
Avec display:table; et display:table-cell; j'arrive à mes fins mais ça ne fonctionne pas sous IE, les dimensions n'etant pas du tout prises en compte Smiley fache
Si je passe un display:block; le lien a les bonnes dimensions mais impossible de centrer le texte verticalement

Y-a-t'il une solution?

Voici mon code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css"> 
div#td_gauche  div.titre  {
	text-align:center;
	width: 230px;
	height: 29px;
	margin: 10px 0 0 0;
	display:table;
}

div#td_gauche  div.titre  a, div#td_gauche  div.titre  a:hover {
	background-repeat: no-repeat;
	color: white;
	display:table-cell; 
	vertical-align: middle;
	width: 230px;
	height: 29px;
}

div#td_gauche  div.titre  a{
	background-image: url('image/navig/b_off.gif');
}

div#td_gauche  div.titre  a:hover{
	background-image: url('image/navig/b_on.gif');
}
</style>
</head>
<body>

<div id="td_gauche">
<div class="titre"><a href="index3.php?tmn=1">Titre</a></div>
</div>

</body>
</html>



Merci d'avance pour votre aide
Modifié par Rei Itchido (18 Dec 2006 - 10:10)
Bonjour à toi ...

tout d'abord, une petite remarque :
il ne t'es pas forcément utile d'utiliser un <div> pour centrer ta ligne de texte. Si tu transformes cette dernière en block, elle pourras recevoir toutes les instructions que tu appliques au div.titre

Pour ma part, je remplacerais donc : 
<div id="td_gauche">
<div class="titre"><a href="index3.php?tmn=1">Titre</a></div>
</div>

Par (en adaptant le CSS en conséquence...) :
<div id="td_gauche">
<a class="titre" href="index3.php?tmn=1">Titre</a>
</div>

Sinon, concernant ta question, je pense que tu y trouveras réponse dans la FAQ, ici :
- Comment centrer verticalement un élément ?
bonjour !

display:table et display:table-cell ne fonctionne pas sous IE6, ces propriétés ne sont pas reconnues. (sur IE7 je ne sais pas).

Pour ton lien joue avec le padding. Donne lui un display:block avant par contre pour pouvoir lui attribuer une hauteur.
Smiley cligne
Merci pour vos réponses (et vos conseils)

J'arrive à ce que je veux en mettant display:block; et line-height:hauteur de mon image de fond;

@ bientôt
Rei Itchido a écrit :
J'arrive à ce que je veux en mettant display:block; et line-height:hauteur de mon image de fond;

Par contre, si on agrandit le texte et que celui-ci passe sur deux lignes, on est dans le caca. Smiley bawling
Ha vi effectivement.
Je ne vois pas de solution avec les images de fond fixes dans ces cas là Smiley decu

Petite question en passant : c'est possible d'empêcher la modification de la taille de la police pour une span par exemple? Ca m'etonnerait mais sait-on jamais...
Rei Itchido a écrit :
Petite question en passant : c'est possible d'empêcher la modification de la taille de la police
C'est franchement déconseillé en tout cas...
Rei Itchido a écrit :
Oui biensûr mais là c'est pour un cas extrême.
Est-ce possible?

Un cas extrême ? Un lien de navigation, c'est un cas extrême ?... Smiley sweatdrop
Je me demande alors ce qui est « bénin ».

Plus sérieusement, étant donné qu'il est impossible techniquement de figer du texte ou d'être sûr du rendu du texte sur une configuration inconnue, je vois deux possibilités :

1 - Solution souple : ne pas figer en hauteur, utiliser une hauteur de ligne faible (pour que l'élément ne prenne pas trop de hauteur lors du passage sur deux lignes), espacer ensuite avec du padding, et prévoir une image de fond adaptable.

2 - Solution rigide (et un peu moins accessible) : mettre le texte en images, avec images directement dans le code HTML et attributs alt correctement renseignés.
2bis, on pourra mettre le texte en image de fond (dans la feuille de style, donc), et cacher un texte alternatif via une des nombreuses techniques disponibles pour ça (cf. recherche sur le forum).
Je disais "cas extrême" sous-entendu j'en avais besoin pour quelquechose de spécifique et nulle part ailleurs, bref Smiley cligne

Merci pour les infos en tout cas. Juste une question, qu'entends-tu par "et prévoir une image de fond adaptable"?
Rei Itchido a écrit :
Juste une question, qu'entends-tu par "et prévoir une image de fond adaptable"?

Une image de fond avec un motif répétable, ou bien une image de fond avec des bords partant en dégradé ou en fondu, ou encore une image de fond avec un élément graphique central et un motif répété, assez grande pour être utilisée comme image de fond pour un élément de taille variable.

Tout dépend de ce que tu veux faire...
Sujet clos
Aller à