CSS button - vertical center of text

Question

I have a button that is a simple anchor tag in the style of 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 with the vertical centering of the text inside the button, in some devices it looks normal, but in others it’s in the center.

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

Greetings

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 alignment. Just use display: table-cell; and vertical-align: middle; . Here it is.

Answer 2

Use the height of the line to center it vertically. I usually use the same value as its height.

Answer 3

Did you try to set the font size in your link? Each browser probably has its own default size, so this may be a hint. Be careful with filling and width / height, you need to reduce the block size if you add a pad because the additive is included in the width. For example, a simple block with a width of 100px without filling will have a size of 100px: ok. Add padding-left: 10px; , and your block now has a width of 110 pixels .;)

Answer 4

I would use line-height as bchhun, as mentioned. In addition, padding-top and padding-bottom can help.

Answer 5

You can copy this code and put it in CSS and customize everything you need

 .btn-allignment{ width: 88px; height: 40px; margin: 0 auto; padding: 0; display: inline-block; line-height: 40px; margin-top: 9px; text-align: center; }