March 1, 2007

Aligning images in text

You will find other articles relevant to this document in these sections:
Richard Lee @ 11:49 am

If you need to nicely align and image in a line of text here’s how you do it

.inline-img {
 
/* Firefox */
vertical-align:middle;
display:-moz-inline-block;
display:-moz-inline-box;
/* Everybody else */
display:inline-block;
 
}

Presto!

Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages.
  • del.icio.us
  • digg
  • Furl
  • Reddit
  • YahooMyWeb

2 Comments »

  1. Got an example of the output?

    Comment by Cameron Manderson — March 2, 2007 @ 10:31 pm

  2. Yeah sure:

    Here is an image inserted between text. Notice how the image sits on the baseline?
    Here is the same image with our inline styles applied. See how the image is centred in the paragraph?

    Comment by Richard Lee — March 5, 2007 @ 9:33 am

RSS feed for comments on this post. TrackBack URI

Leave a comment