Best practice vertical centering issue

I have a large Shopping Cart image with a small “add to cart” label next to it appearing at the bottom of a product description.
I want the label to be vertically centered with respect to the image.

++++++
++++++
+Image+ Label
++++++
++++++

Would I be best just to use a table here? I’ve tried a few things and unsatisfied with the result. I don’t feel this should get its own div (and even with it I couldn’t get the result I wanted easily), but I don’t know how to get the text in the center mathematically. Right now I just have it positioned with margins, but if the image changes height it won’t be centered anymore. How would you approach this?

And I know there are many answers to this question, just curious to see how people would go about it.

Edit: Hmm just realized I could set the image as the background of the <p> and then use vertical-align middle… maybe that would be the way to go… just need to have padding tho

vertical-align does not apply to BG images, only html images that are in the default state of display:inline

adding to that you can vertically center a BG either by setting the values in the background: declaration or using a background-position declaration. However, if your IMG is really part of the CONTENT and not the style of a page, it would not be practical. if it’s an image of a product,for example, you would have to create an ID for each individual product in your CSS so set the BG, and apply each individual ID to the proper P tag… … that doesnt sound like fun.

Would I be best just to use a table here?
Hi,
No, you shouldn’t need a table for that. You should be able to target the img with vertical-align:middle; Both the img and label are inline elements so vertical-align should work. You could also set them as display:inline-block; and still use vertical-align.

If you are still having problems then post a link to the page or post your mark up.

Edit: Hmm just realized I could set the image as the background of the <p> and then use vertical-align middle… maybe that would be the way to go… just need to have padding tho
vertical-align does not apply to BG images, only html images that are in the default state of display:inline