Question

I have a button with an image background applied to it. Inside the button tag there is some text. To center the text I am using padding to position it. However everytime I change the text inside the position is affected and I need to fix the padding again. Is there a way of keeping the text centred regardless of its length?

My 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

Do this –

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