You can CSS center images relatively simply. There are two techniques to center an image. one looks at the image as text, the other as a block.
See the image as text
One easy option is to CSS center an image by seeing it as text. We will use the following HTML:
So we have a div, inside which we have an image. To align the image in the center simply apply the following CSS:
There is one important thing though, the CSS centering must be places on the element above the image. This does not work:
Instead, this works perfectly:
To see this code in action, check out this JSfiddle.
The reason the center attribute must be on the element above the image is that the text-align attribute specifies what to do with text inside a block. If you would have this for example, it would be impossible to CSS select the text itself:
<div> Hello </div>
Instead, you tell the <div> element to center it’s contents.
Seeing the image as a block
If you don’t want to see the image as text, you can view it as a block. You might want this because you don’t want to center everything inside an element, but just the image.
We start with the same HTML:
Instead of centering the everything inside the div, we apply the following CSS:
If we translate this code to more human friendly:
- Make this image 200 pixels wide
- Automatically determine margin on the left and right
- View this image as a block
The margin: auto; command can be used to center things, but is dependent on 2 things:
- The object must have a defined width
- The object must be labeled as a block
You can see this code in action at this JSfiddle.
In my beginning CSS days I spend many hours trying to figure out the centering of objects. The most common thing to forget is to specify a width and to label an element as a block.
This gets double confusing because some elements are labeled as a block by default. So seemingly the margin: auto; sometimes works and sometimes doesn’t. This is not the case. If the auto command doesn’t work, your code is wrong 🙂