Question

I have a Button that is a simple anchor tag styled with the following –

.buyBtn{ 
   background:url(../images/buyBtn.png) no-repeat; 
   padding-top:4px; 
   width:97px;     
   height:28px; 
   margin-top:14px;
}
.buyBtn a{
   color:#fff!important; 
   font-weight:normal!important; 
   text-decoration:none;
   padding-left:27px;  
   padding-top:12px; 
   text-shadow:none!important;
}

I’m having problems vertically centering the text within the button, it appears fine in some devices, but off centre in others.

Can anybody recommend a way to fix this or a better solution to achieve the same result?

Cheers

Answer 1

HTML:

<div class="buyBtn"><a href="#">Button</a></div>

CSS:

.buyBtn{ 
    background:url(../images/buyBtn.png) no-repeat; 
    width:97px;     
    height:28px; 
    display: table-cell;
    vertical-align: middle;
}

.buyBtn a{
    color:#fff!important; 
    font-weight:normal!important; 
    text-decoration:none;
    padding-left:27px;
    text-shadow:none!important;
}

No need to use padding-top or margin-top for vertical align. Just use display: table-cell; and vertical-align: middle;. Thats it.