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='' alt='My CSS Logo' /></p>


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

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


Post a Comment

Popular posts from this blog

Quick Review: Choose the Best Classified Script For Your Needs

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

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