CSS Help - Lining up text on a button

[CasinoKev]

I'm trying to have a button on my review pages with a text link centered over the button. The following works for the most part.

p.playslotnow {
font-family:arial;
font-size:20px;
font-weight:bold;
padding-left:35px;
}

.playslots {
background-image:url('/images/red-button-large.png');
background-repeat:no-repeat;
float:right;
padding:15px;
width: 344px;
height: 49px;
}

The problem I'm having is that each game has a different title and the text moves more left or right depending on how short or long the text is.

How can I have the text centered over the button no matter what?

[Matt Geer]

I'm trying to have a button on my review pages with a text link centered over the button. The following works for the most part.

p.playslotnow {
font-family:arial;
font-size:20px;
font-weight:bold;
text-align:center;
line-height:enter a number in pixels here..might have to play with it to get it just right;
padding-left:35px; <---- take this out if you're only using one line of text like "play now" or "download" ..use the line-height instead}

.playslots {
background-image:url('/images/red-button-large.png');
background-repeat:no-repeat;
float:right;
padding:15px;
width: 344px;
height: 49px;
}

The problem I'm having is that each game has a different title and the text moves more left or right depending on how short or long the text is.

How can I have the text centered over the button no matter what?

In bold ^^^^^

I would do the line height vs the padding myself as long as you're not putting other text in there besides maybe 'play now' or whatever.

(I'm still rather new with coding myself, so someone else may want to chime in and confirm what I did)

[CasinoKev]

Thanks for giving it a shot Matt! Actually, that's the problem - each page has different text. For example, one page has "Download Game" and another may have "Download Really Long Game".

The text-align:center didn't work, but I'm sure we're on the right track.

[sirtiner]

CSS

.playslots {
background-image:url('/images/red-button-large.png');
background-repeat:no-repeat;
float:right;
width: 344px;
height: 49px;
text-align:center;
}
.playslots a {
font-family:arial;
font-size:20px;
font-weight:bold;
line-height:49px;
}

HTML

<div class="playslots"><a href="#">Download Game</a></div>

[CasinoKev]

Beautiful! Thanks sirtiner!

[Matt Geer]

CSS

.playslots {
background-image:url('/images/red-button-large.png');
background-repeat:no-repeat;
float:right;
width: 344px;
height: 49px;
text-align:center;
}
.playslots a {
font-family:arial;
font-size:20px;
font-weight:bold;
line-height:49px;
}

HTML

<div class="playslots"><a href="#">Download Game</a></div>

Showoff

I think I was close, wasn't I?

[sirtiner]

Showoff

I think I was close, wasn't I?

haha, yeah you were close