Centering text

[ubiquity]

I know this must appear as a very silly question, but how to I center the text in the middle of the image?

I am trying to re-create some css image menus, like the one attached, and want to be able to center the text so when the mouse is hovered, the replacement image appears in the same place.

Any thoughts on the easiest way to do this?

It might be easier to create 3 images then paste them into one, but then I would be worried about other alignment issues!

Thanks,

A newb.

[oma]

possibly use the align plugin. viewtopic.php?t=4900

[ubiquity]

Spot on, did the job, thanks.

Some amazing images being produced here, will have to look through some of the tutorials!

[Ego Eram Reputo]

Here's a nice and simple rollover technique that enjoys cross browser compatibility: http://www.webcredible.co.uk/user-frien ... tons.shtml

The beauty of this technique is that you only need two images. The best (IMHO) method to create these dual images is to recolor the background of your original and then use File>>"Save as" to save out the altered second image. If your original image has separate text and background layers this technique is even easier.

[ubiquity]

Thanks for that Ego, I will have a look into it. I currently have a site I am working on, having used a nice css template.

The text I am using seems awefully jagged, however, especially when viewed in a lower resolution. Any suggestions for getting this text looking more anti-aliased?

http://www.verdayne.com/0.2a/

[Ego Eram Reputo]

Definately. Don't use text in your image!

Use CSS to overlay the text over your image instead (image will be a background only). Now when the user resizes, the text will resize fluidly with the page.

CSS can then be used to give you a nice mouseover (read: HOVER) effect very simply.

[ubiquity]

Overlay text would make the most sense, but I do not want to give the user the ability to resize the text as this could make it later than the image it is on top of...

[Ego Eram Reputo]

You can hard code the size of the font. If you set the absolute pixel size (16px as opposed to 1.2em for example), then the font won't resize with the rest of the page.

Read more: http://www.bigbaer.com/css_tutorials/css_font_size.htm

BTW: this discussion might be best continued in the "Alfredo > Web Design Discussion" thread.