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!
HTMLCSS

Avatar of undefined
Last Comment
rihsc102

8/22/2022 - Mon
Tom Beck

Add this:

#nav ul li{
    float:left;
}
ASKER CERTIFIED SOLUTION
Chris Stanyon

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
rihsc102

ASKER
Great!
rihsc102

ASKER
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!
Experts Exchange has (a) saved my job multiple times, (b) saved me hours, days, and even weeks of work, and often (c) makes me look like a superhero! This place is MAGIC!
Walt Forbes
Chris Stanyon

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 :)
rihsc102

ASKER
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/Web_Development/Web_Languages-Standards/CSS/Q_28079680.html

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