CSS: Aligining text in the centre of a background image

[MortimerJazz]

Tweet

Is this actually possible?

I'm trying to create a menu using the same background image. However, I'd like to have the text in the centre of the button.

Here's the code I'm using at the moment:

CSS:
ul
{
list-style-type: none;
padding: 0;
margin: 0;
}

li
{
color: "#ffffff";
background-image: url(button_bg.jpg);
background-repeat: no-repeat;
}


HTML:
<ul>
<li>Home</li>
</ul>

Currently the text is alligned to the left of the image.

Thanks alot in advance for your help with this

[pete_coles]

put

text-align:center;

in the li css

[DioBach]

put

text-align:center;

in the li css

That would do it horizontally, but not vertically? Depends on the size of background image as well. If you've set the size of the background image somewhere, you could use margins top and bottom to set the vertical centering.