How to Align an Image using CSS

My CSS Logo

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>

Comments ( 2 )

Comments are closed.