Center verticalement un texte sur un bouton

**lebanner59** · 14/11/2014, 09h46

Bonjour a tous,

J'ai un souci sur un bouton, je n'arrive pas à centrer le texte sur le bouton.

Voici le code CSS :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.boutonnew {
	width:170px; 
	height:60px;
	padding:8px 0; 
	text-align:center; 
	text-decoration:none;
	display: inline-block; 
	float:left; 
	margin:0 15px 15px 0; 
	font-size: 20px; 
	border-radius:7px; 
	box-shadow: 0 0 1px rgba( 0, 0, 0, 0.2), 0 -1px 0 rgba( 255, 255, 255, 0.1); 
	font-size: 23px; 
	color:#333; 
	text-shadow: 0px 1px 0px rgba( 255, 255, 255, 0.3);
}	
.boutonnew.vert {
	background: #91BD09;
	background: -webkit-linear-gradient( #91BD09, #4E9939); 
	background: -moz-linear-gradient( #91BD09, #4E9939); 
	background: -ms-linear-gradient( #91BD09, #4E9939); 
	background: -o-linear-gradient( #91BD09, #4E9939); 
	background: linear-gradient( #91BD09, #4E9939);
	}
.boutonnew.vert:hover{
	background: #A3C416;
	background: -webkit-linear-gradient( #A3C416, #55A53C);
	background: -moz-linear-gradient( #A3C416, #55A53C);
	background: -ms-linear-gradient( #A3C416, #55A53C);
	background: -o-linear-gradient( #A3C416, #55A53C);
	background: linear-gradient( #A3C416, #55A53C);
	}	
.boutonnew.vert:active{box-shadow: 1px 1px 10px #285419 inset, 0 1px 0 rgba( 255, 255, 255, 0.4);}
.boutonnew.vert {color:#3D722E; text-shadow: 0px 1px 0px rgba( 226, 200, 200, 0.4);}

Voici les infos de mon fichier html (très simple, c'est simplement pour le test) :

Code html :

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

1
2
3
4
5
6
7
8
9
10
<html>
<head>
<link rel="stylesheet" type="text/css" href="bouton.css" media="all">
<title></title>
</head>
<body>
<a  href="" class="boutonnew empty vert">Mon premier texte</a>
<a  href="" class="boutonnew empty vert">Le deuxieme texte</a>
</body>
</html>

Est ce que quelqu'un aurait-il une idée svp ?

Merci d'avance
Cordialement

**Bovino** · 14/11/2014, 09h52

Code :

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

line-height: 60px;

**lebanner59** · 14/11/2014, 09h56

Bonjour,

J'ai déjà tenté le code ci-dessus et le résultat est pas terrible (cf image ci-dessous)
Nom : bouton.jpg
Affichages : 124
Taille : 9,5 Ko

De ce fait, comment je peux garder la largeur de mon bouton svp ?

Merci d'avance
Cordialement

**ryan** · 14/11/2014, 11h01

Yop!

Par rapport au code posté dans le premier message, simplement ajouter un vertical-align dans l'anchor et tout semble fonctionner:

Code html :

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

1
2
 
<a href='' class="boutonnew empty vert" style='vertical-align: middle;'>Lorem ipsum et bla et bla</a>

**lebanner59** · 14/11/2014, 11h10

Bonjour,

Non cela ne fonctionne pas, c'est simplement un effet d'optique :
Nom : bouton2.jpg
Affichages : 121
Taille : 8,0 Ko

Je n'arrive pas comprendre pourquoi le texte ne s'aligne pas verticalement sur le bouton !!

Merci d'avance
Cordialement

**ryan** · 14/11/2014, 12h25

Yop!

J'y suis arrivé....je me suis souvenu d'avoir eu le cas il y a quelques temps, et j'ai retrouvé la solution dans mes archives.

Première chose: tu dois créer une image vide, en png pour la transparence, de 60px de haut et de 1 px de large, disons qu'elle va s'appeler "dummy.png".

Ensuite, inclure l'image et un span dans ton anchor, avec le style qui va bien:

Code html :

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

1
2
3
 
<a href='' class="boutonnew empty vert" ><img src='dummy.png' style='vertical-align: middle;'><span style='width: 169px;display: inline-block;vertical-align: middle;'>Lorem ipsum</span></a>
<a href='' class="boutonnew empty vert" ><img src='dummy.png' style='vertical-align: middle;'><span style='width: 169px;display: inline-block;vertical-align: middle;'>Lorem ipsum et bla et bla</span></a>

C'est sévèrement capillotracté, mais on dirait que ça marche.

Center verticalement un texte sur un bouton

CSS

Vue hybride

Discussions similaires

Partager

Partager