How to center an image with CSS
I had a funny problem the other day when I was rebuilding my portfolio, I’d completely forgotten how to center an image using CSS. What I wanted to do was align my portfolio piece images to the center of the screen but regardless of how hard I tried they kept ending up on the left.
This is the default position for an image of course, so I wasn’t too concerned about it. If I wanted to ensure that it was always on the left I could of course always add the following code to my CSS file:
[source lang='css']img {
float: left;}[/source]
This would ensure that my image not only aligned to the left but also allowed text to wrap around it’s right hand side. If I wanted to only align the image to the left, without allowing wrapping text I would add:
[source lang='css']img {
float: left;
clear: both;}[/source]
Or if I wanted to do exactly the same thing to the right, I would use the following CSS code:
[source lang='css']img {
float: right;
clear: both;}[/source]
Right and left alignments in CSS are really easy, but what about centering the content? If I was a lazy web designer, I could always use HTML to center the image but that’s a bad practice to get into. HTML is designed to publish content, not format it.
[source lang='html']
Since the center tag is used to format the appearance of HTML I try to avoid it, which turns me back to CSS (Cascading Style Sheets) to center my content.
Generally in CSS if you want to center something you simply set the left and right margins, if you don’t know the width of your object you can specify it in the CSS but in my case each portfolio piece width is different so I needed to be more generic.
[source lang='css']img {
margin-left: auto;
margin-right: auto;
display:block;}[/source]
The trick (if it really is a trick) is to include the display:block line. As we all know (cough), HTML elements are made up of two types of objects. The block objects such as <p>, <h1>…<h6>, <div>,<ul> ect. and inline objects such as <strong>, <b>, <em>, <i> etc., the <img> tag is by default an inline object which means that web browsers do not automatically attempt to associate a buffer for the object.
Since the <img> tag does not have a pre-existing space or area, it can not be centered in an area until you instruct the web browser to assign it an area. For example if you wrapped the image in a <div> or <p> tag, you could text-align the <p> or <div> tag as such:
[source lang='html']
[/source]
[source lang='css']#centerme {
text-align: center;}[/source]
This example works because the <div> tag is a block and therefore the web browser already knows it has a space it can occupy but if you don’t want to clutter your HTML with unnecessary <div> tags, you can simply use the CSS display:block; property to instruct web browsers to treat the <img> tag as a block and accomplish much the same trick.
Happy coding!
