Center un texte (sur une ou plusieurs lignes) verticalement

Bonjour,

Tout est dans le titre.
Comment centrer un texte verticalement, afin qu'il soit, et quelque que soit le nombre de ligne (de 1 à 2 lignes max).
En faite, c'est un bouton (l'image est définie en background), avec une dimension prédéfinie (en regard de la taille du bouton.

Je met ici, à titre d'indication, le code css du bouton:

.bouton {
	width:1345px;
	height:39px;
	background:url(/data/images/bouton.png) 0 0 no-repeat;
	display:block;
	vertical-align:middle;
	margin:0 8px 8px 8px;
	padding-left:36px;
	font-size:11pt;
}

J'ai tenté un vertical-align, mais rien n'y fait.
J'en perd mon latin.

Ya t-il un gourou ici qui pourrait éclairer ma lanterne ?

Cdlt.
Olivier.
Modifié par low (14 Jan 2010 - 12:38)

Bonjour,

Avant de répondre, je pense qu'il est important qu'on te demande si tu considère la compatibilité IE6 importante pour ton projet.
La, ou les réponses au problème dépendront de ce facteur.

J'ai du mal à considéré IE6 , non, en faite, cela n'a pas d'impact, mais si il existe un hack pour ce superbe browser, je suis preneur, mais dans l'absolue, une solution conforme et propre me conviendrai mieux.

Merci.
Olivier.

La propriété vertical-align n'a d'effet que dans les cas suivants :
* un élément en ligne par rapport à un élément ou contenu en ligne adjacent (par exemple, pour aligner une image par rapport au texte qui l'encadre ou un champ de contrôle de formulaire par rapport à son étiquette),
* une cellule de tableau,
* un élément utilisant la propriété display avec l'une des valeurs suivantes : inline, inline-block, inline-table, table, table-caption, table-cell, table-footer-group, table-header-group, table-row, table-row-group.

Sachant que, d'une part, Firefox n'implémente display: inline-block que depuis la version 3 et que, d'autre part, les versions d'IE antérieures à la 8 ignorent les valeurs de display contenant le mot table et n'appliquent display: inline-block à la lettre que pour les éléments de type en ligne (comme span).

Victor BRITO a écrit :
...
Sachant que, d'une part, Firefox n'implémente display: inline-block que depuis la version 3 et que, d'autre part, les versions d'IE antérieures à la 8 ignorent les valeurs de display contenant le mot table et n'appliquent display: inline-block à la lettre que pour les éléments de type en ligne (comme span).

Ceci dit , les regles applicable a des elements autre que des elements de tableau confere le layout dans IE <7 (pour display:inline-block;) , pour les autres navigateur implementant "display:table et compagnie; (ainsi que display:inline-block;) il y a une modification du contexte de formatage.

Ce layout ou contexte de formatage peut-etre induit pour IE<7 via les commentaires conditionnels.

Sachant que display:inline-block; équivaut a zoom:1; pour un element de type inline , il suffit simplement de simuler inline-block sur un element de type block en faisant d'abord un 'reset' de son comportement par défaut a l'aide d'un display:inline; , puis conferer ce layout via : zoom:1; .

Pour les version de firefox 2 et antérieur , une règle propriétaire : display:inline-stack; est tres proche de inline-block , avec le défaut d'empiler les contenus sur une seule ligne !. (it stacks ! no lies ! ) . Un element tampon est nécessaire pour s'interposer entre l'élément ainsi "formaté" et les contenus a afficher si ceux-ci se répercutent sur plusieurs lignes. . Ce conteneur tampon requiert juste un display:bloc; pour retablir un flux d'affichage a l'écran normal.

Dans tout les cas , pour un alignement vertical a l'aide de display:inline-block ; (ou ses correctifs) , un minimum de deux elements adjacent sont requis . L'un etant le plus haut , et le second s'alignant au centre vertical du premier . Rien n'interdit d'imposer une hauteur a l'un de ces elements pour s'en servir comme hauteur de référence minimale de centrage ...

Pour ff2 display:table-cell est aussi utilisable , sans correctifs nécessaire, mais ne permet pas de maitriser la largeur des ces éléments .

Enfin tout ça aurait bien du mal a tenir pour un simple bouton a hauteur variables , (commentaires conditionnels , layout , contexte de formatage et element tampon .... )

Pour des hauteurs fixes et compatibles IE7 et inferieurs , le tableau est la seule solution viable et fiable .

Pour la surcharges html et css voir ces exemples table-cell + inline-block + commentaire conditionnels) http://gcyrillus.free.fr/essai/boiteleien.html (tailles des boites liens imposés) et http://yidille.free.fr/plux/valign/?5-lien-en-cellule-et-centrage-vertical ou (table-cell + commentaires conditionnels) : http://gcyrillus.free.fr/essai/valig.html
daté de oct/2008 ces test sont antérieurs a cette date et l'existence de IE8 et ff3 ... .

Faut-il encore compliqué et se prendre la tete pour IE<7 et ff 2 et inf pour si peu ? Il ya surement des alternatives acceptables pour ses navigateurs "viellots".

GC

Merci de vos réponses... constructives, mais je suis à des années lumières d'avoir autant de connaissance et de compréhension du css en de tel terme.

Ma question, malgré qu'elle soulève l'épineux problème de la rétro compatibilité quasi impossible de certains navigateurs, reste somme toute, assez simple.

Peut-on centrer verticalement un texte dans une div ayant une dimension fixe, en faisant abstraction de tout débat sur IE6,7, FF2, etc...

Merci.
Olivier.

Bonsoir,

Par exemple ceci axe un texte sur la hauteur du bloc (ici une div), sans passer par vertical-align. (code complet HTML + CSS de l'exemple, y'a qu'à copier-coller pour tester). Dans un premier temps tu nous parles d'un "bouton" (un input de formulaire ou un lien <a> qui sert de bouton ? Ensuite tu demandes pour une <div>… C'est pas tout à fait pareil, mais je pense que le principe devrait rester le même pour un "input type button".

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8" />
		<title>Centrer texte un texte verticalement dans un bloc.</title>
		<style type="text/css" xml:space="preserve">
		/*<![CDATA[*/
		.exemple  {
			padding-top: 20px;
			padding-bottom: 20px;
			background: #FFC900;
			margin-bottom: 20px;
		}
		.exemple p {
			font-size:11pt;
		}								
		/*]]>*/
		</style>
	</head>
	<body>
<div class="exemple">
	<p>Une ligne de texte axé perpendiculairement sur la hauteur.</p>
</div>
<div class="exemple">
	<p>Mon texte axé perpendiculairement sur la hauteur.<br />Ooops, j'oubliais de voir sur plusieurs lignes !<br />Allez hop, encore une ligne !</p>
</div>
	</body>
</html>

En résumé, le bloc <div> ou "bouton" qui contient ton texte doit avoir des padding-top et padding-bottom égaux en taille. La hauteur des textes est mieux appréciée en % qu'en points ou pixels pour les navigateurs anciens.

<édit
j'ai modifié car j'avais dit une grosse c…… ! et j'ai simplifié le code.
/>
Modifié par Aureance (20 Jan 2010 - 10:44)

Hello low (ou alors hellow comme tu veux).

Si t'es pas allerique à l'anglais, voilà un site avec plein de technique pour centrer verticalement un élément (en).

Au cas ou je fais aussi un rappel sur l'excellent tutoriel de Raphaël.

Voilà, see you.

Mike

Mikerob a écrit :
Hello low

Heu... Moi je trouve ça limite insultant.

EDIT : Oh, mais le gars s'appelle "low", ça change tout !
Modifié par BeliG (30 Apr 2010 - 11:54)

Bonjour,

En faite, c'est lowcraft, mais j'assume complètement la signification de 'low' dans le sens le plus péjoratif. Dans ma prochaine vie, j'utiliserai le pseudo highcraft.

Sinon, pour la solution apportée par @Mikerob, je vais y jeter un oeil, malgré mon allergie.

Merci.
Low.

low a écrit :
Merci de vos réponses... constructives, mais je suis à des années lumières d'avoir autant de connaissance et de compréhension du css en de tel terme.

Ma question, malgré qu'elle soulève l'épineux problème de la rétro compatibilité quasi impossible de certains navigateurs, reste somme toute, assez simple.

Peut-on centrer verticalement un texte dans une div ayant une dimension fixe, en faisant abstraction de tout débat sur IE6,7, FF2, etc...

Merci.
Olivier.

oui ,

display:table-cell;vertical-align:middle;height:xx;width:xx;

Ce qui formate ton div comme une cellule de tableau avec les mêmes caractéristiques , et en particulier pas d'ascenseur possible , la taille s'adapte au contenu si celui devient trop important.

GC

BeliG a écrit :
Heu... Moi je trouve ça limite insultant.

EDIT : Oh, mais le gars s'appelle "low", ça change tout !

Ouaip c'est pour ça que j'ai fait un jeu de mot avec hellow... La prochaine fois je ferais plus attention à la traduction de mes jeux de mots à deux balles .

Autant pour mois, promis la prochaine fois je ferais hellhight, même si le jeu de mot est nul dans ce cas

Sorry.