Discussion :

[moimp]

Bonjour à tous,
Je ne parviens pas à centrer verticalement l'image d'un bouton dans le bouton.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<form>
	<input type="search" name="q" />
	<button name="btnQ"><img src="images/glass.png"></button>
	<button name="helpMark"><strong>&nbsp;?&nbsp;</strong></button>
</form>

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
button {
	height:30px;
	padding:2px 0;
	vertical-align:middle;
}
button img {
	border:1px solid black;	/* Pour visualisation uniquement */
	vertical-align:middle;
}

Résultat actuel:

[gabi7756]

Bonjour,
Donne une dimension fixe a ton image ca devrait déjà t'aider normalement
J'avais utilisé ceci que je trouve super pratique :

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
display: grid;
place-items: center;

Cdt

[moimp]

Ta solution ne fonctionne pas et me crée un décalage inattendu des éléments voisins. J'ai finalement trouvé un moyen simple en mettant une marge supérieure négative.

[NoSmoking]

Bonjour,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
button {
  height: 32px;
  padding: 0;
  vertical-align: middle;
}
button img {
  display: block;
  height: 100%;
}

... devrait suffire !