How do you center an css image substitution image

Hi,
I know how to center an image using css and html where the image source is in the html, but what do I do in this case where I’m trying to center a css image substitution. Here’s my code with it not centered:

.theLogo{
position:absolute;
top:10px;
left:80px;
width:143px;
height:165px;
background:url(images/Logo.jpg);

	}

#logo a {
position:absolute;
top:10px;
left:80px;
width:143px;
height:165px;
}
#logo a:hover {
background:url(images/Logo.jpg) no-repeat 0px 0px;
}

--------->XHTML:

<div class =“theLogo”></div>

<div id=“logo”>
<a href=“#”></a> </div>

this works fine but I can’t figure out how to center it. Any help would be great. Thanks. You can see this site at :http://www.eclipsedesign.net/mobile/

hey…
you can use the ‘background-position’ property to center the image:
background-position:center;
i think it will work for you…

By the way, i think your website link is not working.....i suppose!

Hi, the only thing I’d like to add is that with the above code djsahay mentioned, it will center it vertically AND horizontally.
Take this line of code

background:url('smiley.gif') no-repeat center top;

The first value (center) is the horizontal value. The 2nd is vertical. So if you want it vertically centered and not horizontally, do “top center” :).

Thanks but I couldn’t get either of those to work. I’m trying to make a mobile site and make the stuff center to the width of the phone, not just certain phones. If I can’t figure it out I’ll have to make a site for each phone width you know what I mean. thanks

What do you mean it doesn’t work? It certainly should position it center :).

Take this link for example Clicky :0.

For your mobile sites, you can use javascript css_browser_selector.

You can refer it through the site here: http://rafael.adm.br/css_browser_selector

Hope it will help for you

Thanks
Mani

Thanks for the info.

Is everything working now? :slight_smile: