CSS Divs, Images, And text centered to the right of those images?

Question

Basically, I am trying to get the same look I have here...

http://sprague.wvi.com/students08/thompson_taylor/senior%20year%20work/aslett%20clearing%20css/aslett.htm

As you can see (for the most part) the links and text to the right of each image is centered in the middle of the height of that image. Well, I did this through margins in CSS, but obviously each time the image changes height then I will have to also change the margin...This can get annoying.

I am trying to build a template to where you put the image in, you put the text in and it's perfectly centered next to the image. Does anyone know how to do this, or even if it can be done? Can you center text in the middle of the image, but to the right of the image?

Write back asap... +++ Rep provided for correct answer.

Thanks

Answer 1

Looking at your CSS and hteml, I would make a couple of changes for starters,

Don't create a separate "content" element for each of your separate paragraphs, like content1, content2, and content3 for English, Hamlit, and Mythology. This is getting a little too detailed in your CSS and will continue to cause you headaches in administration.

You have a ".picture" id, but you're calling it as a "class" in your html page.

Have a separate "div" for each of your three categories. Nest your image, text, and links for each category in it's own div.

Change your html to something like this in general, (yahoo Answers will either concatenate longer lines of code, so I've thrown in a couple extra spaces to prevent that).
=======================

Answer 2

The ugly answer is: Use a table. If you put the image in one and the text in another the text will automatically veritcally-align center.

I'm sure there is a way to do this will CSS, but I've never had much luck with vertical-align:middle inside divs.

Answer 3

You have to use javascripts to do the right way. Then make the position of the text relative to the width of your image. Thus, no matter what the image's size is, the text will auto-align itself.

Answer 4

Taking advantage of the peculiar treatment of the vertical-align attribute in the context of table cells...

Answer 5

give the text thats not being centered a class, then give it a margin top or somethin with CSS

example:

.CLASSNAME {margin-top:-20px;}

Answer 6

You could also use javascript such as

Image Caption
http://lab.arc90.com/2006/07/image_caption_1.php