making a list of centered text aligned next to image with CSS

Question

I'd like to make a (non-numbered or bulleted) list of items, where each item has some text that is adjacent to an image. It's important that the text be vertically aligned to the center of the image, and that there will enough top and bottom padding so that each pair of text and image do not vertically overlap. I tried using something like this:

img.floatRight { float: right; margin-bottom: 2px; border: 0px; vertical-align: text-middle}
.myitem { font-size: 12pt; margin-bottom: 50px; margin-top: 130px; vertical-align: middle}

in body of HTML page:

<!-- item 1 -->
<img src="item1.jpg" class="floatRight"><p class="myitem">Description of item 1</p>
<!-- item 2 -->
<img src="item2.jpg" class="floatRight"><p class="myitem">Description of item 2</p>

the problem is that the items overlap -- so the images are not vertically aligned which each other, which i'd like them to be. the margin-top and margin-bottom don't seem to add the right level of padding to achieve this. also, the vertical-align parameter does not seem to vertically align the text to the center of the image.

finally, I'm not sure if I should use p class="" or div class="" here... again, it's important not to have overlap between each items'

any ideas on how to fix this? thanks very much.

Answer 1

Vertical aligning things without using tables is a pain in the butt! You're better off using a table for this. Are your images all using the same width? If not, you can remove the fixed width in td.item_photo{} and td.item_photo img{}. Also you can change table.items width from auto to 100% or a px amount (eg: 400px) if you want.

I hope this helps solve your problem.

table{margin:0;padding:0;border-collapse:collapse}

table.items{width:auto}
td.item_photo{vertical-align:middle;text-align:left;width:200px;padding:0 0 15px 15px}
td.item_text{vertical-align:middle;text-align:left;padding:0 0 15px 0;font-size:12px;line-height:16px}
td.item_photo img{display:block;width:200px}

<table class="items">
    <tr>
        <td class="item_text">Item 1 Description</td>
        <td class="item_photo"><img src="/images/item1.jpg" /></td>
    </tr>
    <tr>
        <td class="item_text">Item 2 Description</td>
        <td class="item_photo"><img src="/images/item2.jpg" /></td>
    </tr>
</table>

Answer 2

I would start with putting the images inside the p.myitem block and giving it a:

p.myitem {
    overflow: hidden;
}

That should take care of the overlap.

About the vertical align of the images and the text, that can be tricky using css. If the vertical-align solution does not work and you know the height of the images and it is only one line of text, the easiest solution is giving the paragraph a line-height equal to the images.