centre text over rollover button with css

[batterdmooie]

Hi, is there any way of having a plain rollover button, and text styled using css centred over the top??

I have the rollover working perfectly, but I can’t get my text to align vertically, I have used padding, but it throws the rollover out.

I am probably going about it totally the wrong way, so any help would be appreciated. Is there an easier way of styling and centring text?

Here is my code:


<!--

.Button

{float:left;
width: 180px;
height: 40px;}

.Button a

{display: block;
width: 180px;
height: 40px;
background: url(images/button1.jpg) no-repeat top left;
text-decoration: none}

.Button a:hover
{background-position: bottom left;}

.alttext
{font-family: arial, helvetica, sans-serif;
font-weight: bold;
color: white;
padding: 10px;
text-align: center;}
-->



<div class="Button"><a href="link.html">
<span class="alttext">ABOUT </span></a></div>

[jlknauff]

Try adding a p class to the text and make the p class center-aligned

[jlknauff]

<div class="Button"><a href="link.html"><p class="centeredtext">ABOUT</p></a></div>

[colonel5]

try putting the "text-align:center;" into the .Button a

[batterdmooie]

Thanks everyone for taking the time to reply.
I don’t think I was very clear in my post. The problem is getting text to align vertically, not horizontally.
I would like to get "ABOUT" to centre vertically over the button "url(images/button1.jpg)"

I did put all the text code with ".button a" but it didn’t work.
That why I created “.alttext” to style it separately from the rollover css.

So once again any help will be greatly appreciated. I have trawled the net for a solution, to no avail.

[jlknauff]

The problem is getting text to align vertically, not horizontally.
I would like to get "ABOUT" to centre vertically over the button "url(images/button1.jpg)"Center will not work for that. You're going to need to use padding to get the text where you want it.

I did put all the text code with ".button a" but it didn’t work.
That why I created “.alttext” to style it separately from the rollover css.You'll need to wrap a <p> tag around the text.

[chalsema]

Use "line-height." So if your button is 40px high, set your line-height to 40px as well.
.Button a
line-height:
{
40px;
}

Edit: Oops!! I'll leave the mistake since it's funny... See correction below

[Drazan]

I think Chalsema meant

.Button a
{
line-height: 40px;
}

You can also do line-height: 130% in your paragraphs to make text easier to read on the monitor.

Jade

[chalsema]

Yes I did. Too much turkey makes the mind do crazy things :D

[batterdmooie]

Thank you everyone for you help. The line hight worked a treat.
Proper chuffed 2 pieces now, woohoo.