Suivez les fils RSS
 
Rechercher dans le sujet :
Forum
» Sémantique web et HTML, XHTML, HTML5
» Centrer verticalement le texte d'un input submit
Auteur
elekaj34
#
Citer
15 Posts
 Bonjour,

J'essaye (désespérement) de centrer verticalement mon texte dans une input de type submit. Celui est systématiquement aligner avec le bas du bouton Smiley decu

Donc le code html 
<input type="submit" class="submitButton" value="Valider" />

et le CSS associé

form {margin: 0px; padding: 0px; }
input.submitButton { 
	background: #616161;
	border: 1px solid #616161;
	color: #fff;
	vertical-align: middle;
	height: 22px;
}


J'ai essayé en change la directive display (en inline ou inline-block) cela ne change strictement rien !

En supprime le height et en jouant avec le padding cela fonctionne ... mais cela est interpréter différemment en fonction des navigateurs et pour l'aspect visuel, mon bouton doit faire 22px de haut !

Je suis en XHTML 1.0 Transitional

Merci pour votre aide
^
Ten
#
Citer
372 Posts
 Bonjour,

as-tu testé un line-height:22px ?

Sinon réfères-toi également à cet article et à certains autres..

Bon courage !
Je vois la vie en #ffoodd
http://www.ffoodd.fr 
^
_laurent
#
Citer
Keep It Simple & Stupid
250 Posts
 Bonjour aussi,

a écrit :
En supprime le height et en jouant avec le padding cela fonctionne

Pourquoi supprimer le "height" ? laisse le height a 22px et met un padding-bottom de quelques pixels. Pour moi ca fonctionne sous FF8 et IE8 (je sais pas si ca bloque sur plus récent..)
"La simplicité est la sophistication suprême" _Léonard de Vinci
http://www.undless.fr 
^
elekaj34
#
Citer
15 Posts
 Merci pour vos réponses

Donc j'ai laissé le height à 22px. En fait, je me suis aperçu que sur l'ensemble des navigateurs hormis FF, le texte est centré verticalement.

Il n'y a qu'avec Firefox 8.0 (tant sous Win que Linux) que mon texte est en bas du bouton !

Mais si j'augmente le height à 30 ou 40 pixels, peut importe ... le texte avec FF 8 est centré verticalement. C'est un peu comme si mon bouton n'est pas assez haut !!!

Si j'ajoute du padding-bottom, sur FF le texte se centre ... les autres navigateurs restent insensible à la modif, sauf Opera pour qui du coup le texte est trop vers le haut !
^
Sujet clos
Aller à