Re: Aligning images and text with CSS instead of tables

Giganews Newsgroups
Subject: Re: Aligning images and text with CSS instead of tables
Posted by:  dorayme (doraymeRidTh…@optusnet.com.au)
Date: Tue, 07 Jul 2009

In article <v8o4m.50412$IU6.318…@newsfe05.iad>,
Benjamin Esham <bdesh…@gmail.com> wrote:

> 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?

Yes, I see what you want. Clean CSS. Text middle with image middle. No
HTML tables. Sometimes you can have any two of a list of three. (Some
consultants like telling their clients that they can have cheap, good,
quick, pick any two! <g>)

1. The table markup certainly gets clean CSS because there is hardly any
need for much. Plus it is particularly apt for what you want in look and
behaviour, and plus it is semantically kosher if anything is. Why would
you resist it? I trust not for any silly reason like you should never
really use tables unless it relates prices to products or for something
very scientific looking!

2.Using CSS to make various elements behave like tables and cells.
Downside is browser support. Not bad on Safari, Firefox, iCab, Opera:

http://dorayme.netweaver.com.au/byTableCSS.html>

3. Your non-table markup above with a little CSS would solve but it
would be a bit annoying: p {width: 1000000px}. <g>

--
dorayme

Replies

None

In response to

Aligning images and text with CSS instead of tables posted by Benjamin Esham on Mon, 06 Jul 2009