Aligning images and text with CSS instead of tables

Giganews Newsgroups
Subject: Aligning images and text with CSS instead of tables
Posted by:  Benjamin Esham (bdesh…@gmail.com)
Date: Mon, 06 Jul 2009

Hello all,

I am trying to replace some <table>s on one of my websites with clean CSS
markup.  I'm having trouble getting images and text to align in exactly the
way I want.  The old markup looked like

<table><tr>
    <td><img src="..." /></td>
    <td>some text here</td>
</tr></table>

with the effect that the text was placed to the right of the image; the
vertical center of the text was aligned with the vertical center of the
image.  This is what I'd like to reproduce with CSS.  I started by trying

<p>
    <img src="..." style="vertical-align: middle" />
    <span style="vertical-align: middle">some text here</span>
</p>

This works great for small amounts of text.  However, if the text wraps, the
second line begins below the image, whereas I'd like *all* of the text to be
positioned to the right of the image (and with the vertical centers still
aligned).  Can anyone offer me some advice about how to set this up?

Many thanks!

--
Benjamin D. Esham  |  bdesh…@gmail.com  |  bdesham128 (AIM)
"Lasciate ogne speranza, voi ch'intrate."    — Hell (via Dante)

Replies