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:  BootNic (bootnic.boun…
Date: Mon, 6 Jul 2009

On Mon, 06 Jul 2009 14:47:55 GMT
Benjamin Esham <bdesh…> 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=3D"..." /></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=20
> <p>
> <img src=3D"..." style=3D"vertical-align: middle" />
> <span style=3D"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?=20

..img {
  overflow: hidden;
  margin: 0 0 0.5em 0;
..img img {
  width:64px; /* width of image */
  height:64px; /* height of image */
..img div {
  margin-left:74px; /* width of image + left & right margin */
  padding-left: 0.3em;
  min-height:74px; /* height of image + top & bottom margin; */

    <div class=3D"img">
      <img alt=3D"example image" src=3D"/example.png" width=3D"64"
          Lorem ipsum =E2=80=A6
          Etiam dictum =E2=80=A6

Float image example:
[url] [/url]

BootNic                                        Mon Jul 6, 2009 01:18 pm
  It is better to die on your feet than to live on your knees!
  *Emiliano Zapata*



In response to

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