Bouton avec fond d'image et texte

Question

J'ai un bouton avec un fond d'image appliqué. À l'intérieur du bouton, il y a du texte. Pour centrer le texte, j'utilise un remplissage pour le positionner. Cependant chaque fois que je change le texte à l'intérieur de la position est affecté et j'ai besoin de réparer le rembourrage à nouveau. Y a-t-il un moyen de garder le texte centré indépendamment de sa longueur?

Mon code:

<button type="button" class="scroll_button" id="scroll">SIGN UP NOW</button> 

.scroll_button{ 
background: url('../images/button_arrow.png') no-repeat 0 0; 
padding: 24px 65px 45px 35px; 
border: 0; 
float: left; 
margin-top: -100px; 
color: white; 
text-transform: uppercase; 
font-size: 16px; 
cursor: pointer; 
} 

Answer 1

faire -.

padding: 24px 0px; width: 250px; text-align: center; 

.scroll_button{ 
background: red; 
padding: 24px 0px; width: 250px; text-align: center; 
border: 0; 
float: left; 
color: white; 
text-transform: uppercase; 
font-size: 16px; 
cursor: pointer; 
} 

JSFiddle

Answer 2

Retirez le padding et les remplacer par:

text-align:center; 

Answer 3

Vous pouvez utiliser text-align:center; pour centrer horizontalement et line-height ensemble à quelle que soit la hauteur du conteneur parent est au centre le texte verticalement.

Answer 4

Vous pouvez utiliser text-align: center; pour centrer le texte horizontalement dans le bouton. hauteur ensemble et la largeur pour en faire la taille dont vous avez besoin, puis utilisez line-height: /*unit*/; pour centrer verticalement (où l'unité est égale à la hauteur de l'élément

.scroll_button{ 
background: url('../images/button_arrow.png') no-repeat 0 0; 
border: 0; 
float: left; 
margin-top: -100px; 
color: white; 
text-transform: uppercase; 
font-size: 16px; 
cursor: pointer; 

    /*centering. adjust to taste*/ 
    width: 150px; 
    height: 50px; 
    text-align: center; 
}​ 

http://jsfiddle.net/Kyle_Sevenoaks/PN8U3/