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
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>