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…@gmail.com)
Date: Mon, 6 Jul 2009

On Mon, 06 Jul 2009 14:47:55 GMT
Benjamin Esham <bdesh…@gmail.com> wrote:

> Hello all,
>=20
> 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
>=20
> <table><tr>
> <td><img src=3D"..." /></td>
> <td>some text here</td>
> </tr></table>
>=20
> 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
>=20
> <p>
> <img src=3D"..." style=3D"vertical-align: middle" />
> <span style=3D"vertical-align: middle">some text here</span>
> </p>
>=20
> 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;
  color:#000;
  background-color:palegreen;
  margin: 0 0 0.5em 0;
  zoom:1;
}
..img img {
  float:left;
  width:64px; /* width of image */
  height:64px; /* height of image */
  margin:5px;
}
..img div {
  margin-left:74px; /* width of image + left & right margin */
  padding-left: 0.3em;
  color:#000;
  background-color:lightyellow;
  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"
      height=3D"64">
      <div>
        <p>
          Lorem ipsum =E2=80=A6
        </p>
        <p>
          Etiam dictum =E2=80=A6
        </p>
      </div>
    </div>

Float image example:
[url]http://bootnic.bounceme.net/FloatImage.php [/url]

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

Replies

None

In response to

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