Link to home
Start Free TrialLog in
Avatar of rihsc102
rihsc102

asked on

How to centre text over image without separate div tag?

I would like to know how to centre text over an image without using a div tag. I am creating a navigation menu and would prefer not to wrap each button within a separate div tag. Probably very simple to do but I'm new to CSS :-P .

At the moment I'm using "text-align:center". This works for the first button, but all txt is centred over the first button, instead of over each individual button.

I have created a jsfiddle to show what I mean: http://jsfiddle.net/3JCKB/

Any help is appreciated!
Avatar of Tom Beck
Tom Beck
Flag of United States of America image

Add this:

#nav ul li{
    float:left;
}
ASKER CERTIFIED SOLUTION
Avatar of Chris Stanyon
Chris Stanyon
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of rihsc102
rihsc102

ASKER

Great!
Thanks Chris. The reason I didn't use the jquery you provided on the previous question was due to the fact I didn't really understand it. Also I don't like the way the button will fade all the way in and all the way out even if you only hover for a milisecond.

I have managed to work out from your code what my problem was (for this question) - it was that I was using p tags instead of span tags. After a bit of research i found that this is because span is an inline element where as p is a block level element.

Another thing I have realised from your code is that I am way over using the class tag. I can see from your code in most cases you don't actually need it, as you can be quite specific when targeting selectors.

I have updated my fiddle to working code and cleaned it up - if you're interested you can see it here:

http://jsfiddle.net/yTACT/

Thanks for all the help!
Looking good. There's a few different ways of doing this sort of thing and I don't think any one way is the 'right' way - if it works it works!

There will be a way to prevent the fadeIn/fadeOut from completing but this was more to get you going in the right direction.

I will point though that the CSS transitions are particularly BETA. They won't work in older browsers and any of the major browsers could drop or change their spec at any given upgrade - expect your code to break at some point in the near future.

Nice work though :)
Thanks for the advice! I have a problem though :-/ . The text-center works great in all browsers apart from firefox and ie. In those browsers the text starts on the second button. I have started a new question here:

https://www.experts-exchange.com/questions/28079680/How-to-centre-text-over-image-in-horizontal-navigation-menu.html

I would be grateful if you could take a look ;-)