CODEWITHSUNDEEP
cssbuttoncenter
Lars
Lars

Reputation: 8458

Center Text on a Button

I know this has been asked a couple of times before, but not of the solutions seem to be working in this case. Basically, I want the word "play" to be centered vertically and horizontally on this button. Horizontally, the text behaves itself, but vertically, not matter what I try, it is always a little bit lower than it should, in all browsers I test it on. Does anyone have any suggestions? Thanks

<style type="text/css">
button {
font-family: Verdana, Geneva, sans-serif;
color: white;
border-style: none;
vertical-align: center;
text-align: center;
}

button:hover {
cursor: pointer;
}

button::-moz-focus-inner /*Remove button padding in FF*/
{ 
border: 0;
padding: 0;
}


.start {
background-color: #0C0;
font-size: 2em;
padding: 10px;

}


</style>
<button type="button" class="start">play</button>

Upvotes: 3

Views: 36665

Answers (2)

Doozer Blake
Doozer Blake

Reputation: 7797

The padding on .start is likely what you'll have to play around with, although the way it's set, it should be centering it, but you can break it out to something like padding: 8px 10px 10px 10px;

You might also check and set the line-height under .start and see if it helps.

Upvotes: 8

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

The correct value for vertical-align is middle, not center. However I'm not sure if that'll make the difference, because it might just affect where the button itself is aligned vertically relative to surrounding text. I'm pretty sure button text is vertically centered by default, though...

Upvotes: 0

Related Questions