Jump to content

Centering text


Recommended Posts

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.

29282_438b5d73d8ace2497e7cc14c43c0f31c

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...