How to Align an Image using CSS

Although CSS allows you to do a lot of amazing things with a web page layout, I still think it's limited, in fact sometimes when I get stuck with some coding dilemma I imagine a new CSS code that can solve it, often I find a regular way to solve it though, sometimes the solution involves breaking some W3C (World Wide Web Consortium) guidelines.

I had this problem previously & I faced it again today, to align an image.With text it's easy: you use the text-align property & choose one of the values left, right or center, but that doesn't work for images, the solution was rather simple: to wrap the image with <p> tags and use the text-align to align the <p> & inside it the image.

It worked like a charm! Only I had some important margin below the image because of the p tag values in my style sheet, so I had to add a margin-buttom property to the p tag with he value I wanted.

<p style='text-align: center; margin-bottom: 10px;'><img src='http://gettingeek.com/.../css-logo.gif' alt='My CSS Logo' /></p>

Comments

  1. It also work to enclose the image in and no margin problem.

    ReplyDelete
  2. Oops, your commenter read my div code as code. ... enclose id divs was what I meant to say.

    ReplyDelete

Post a Comment

Popular posts from this blog

Translation with POEdit - Internationalize / Localize WP Themes Guide -Part 3

Making it Translatable - Internationalize / Localize WP Themes Guide -Part 2

Disable Ctrl+W (Close Tab Shortcut) / Restore a Closed Tab - Firefox 3