Centering an image | Part 1 | Bite Size Standards

Centering an image, Part 1

MaurÃcio Samy Silva | 3 January 2007

There are two techniques for placing an image within a block level element:

Wrapping the IMG element in the block level element within the markup;
Setting up the background-image CSS property for the block level element.

The technique you should choose depends upon your needs. We'll describe how to center an image both vertically and horizontally using the first technique in this article, and cover the second in a later article.

Let's consider a 400x200 pixel DIV and a 310x150 pixel image as examples for this article. The DIV will have a 1px solid red border for clarifying purposes only.

Centering an inline image

The following lines of code do the work:

CSS


div.markup {
  width:400px;
  height:200px;
  border:1px solid red;
  	}

HTML


<div class="markup">
  <img src="path/bob.jpg" alt="image description" />
</div>

The lines of codes above will cause the image to be placed at the left–top corner of the DIV.

First step: Pushing the image

Push the image half of the width of the DIV to the right and half of the height of the DIV to the bottom by adding the following to our style rules:


div.markup {
  position:relative;
  width:400px;
  height:200px;
  border:1px solid red;
  	}
div.markup img {
  position:absolute;
  left:50%;
  top:50%;
  }

As you may have noticed, I've set up position:relative for the DIV in order to create a positioning context for the IMG element.

These new CSS rules cause the top–left corner of the image to be positioned at the center of the DIV. However, what we want is for the center of the image to be positioned in the center of the DIV.

Second step: Centering the image, the final touch

Finally, push the image half of its width to the left and half of its height to the top by adding the following to our style rules:

div.markup {
  position:relative;
  width:400px;
  height:200px;
  border:1px solid red;
  	}
div.markup img {
  position:absolute;
  left:50%;
  top:50%;
  margin-left:-155px;
  margin-top:-75px;  
  }

Note: The image width is equal to 310px, meaning half of that is 155px and image height is equal to 150px, so half of that is 75px.

The final result.

Drawbacks

Be aware that:

by using this technique you won't be able to control the image from your main style sheet. If you ever need to change the image and/or its size some extra work might be in order depending on your specific design.
an absolutely postitioned element has inherent consequences, since it is removed from the normal document flow.

To be continued...

In Part 2 we will explain how to achieve a centered background image.

References

Permanent link | Filed under: Cascading Style Sheets (CSS)

About the Author

Maurício Samy Silva (AKA: Maujor) is a web standards advocate located in Rio de Janeiro, Brasil. When he is not writing tutorials and articles on his CSS para Web Design site or on Maujor’s Blog he can be found on the floor, driving cars, trains, trucks, dolls, and all sort of boy’s and girl’s toys with his four years old grandson and granddaughter.

Articles by MaurÃcio Samy Silva

9 Comments

| Post a comment | Comments Feed

steve : http://

3 January 2007, 19:27 : Permanent link to comment

Uhm… what?!

This is pointless if you have to give pixel measurements!

otherwise, you might as well just do:

div.foo img { left: #px; top: #px;
}

Although, I will give credit for trying to solve this, as it is one of those “always needed”, never simple issues.

In this case here, if it is just an empty block, with an image, I would set it as a center, center background image.
Steve C. : http://www.stevecochrane.com/blog

3 January 2007, 20:05 : Permanent link to comment

What’s nice about this that wasn’t reflected in the article is that if you were to give the containing div relative dimensions like % or ems, the image will still be centered.

Also, putting an image in the markup (as opposed to in the stylesheet as a background image) is necessary whenever you want to be sure the image will show when the page is printed.
Kahi : http://kahi.cz/

3 January 2007, 20:06 : Permanent link to comment

Could you please give an example of using this technique in practice?
Kilian Valkhof : http://kilianvalkhof.com

3 January 2007, 22:24 : Permanent link to comment

Kahi, this effect is mostly used for positioning div’s to the center of the page.

While this is a nice technique, there is another drawback too: the content dissapears with very small browser sized (Because of the negative margin). Though this is only relevant for large centered elements.
Markus Stange :

4 January 2007, 12:41 : Permanent link to comment

It can get much easier:

<pre>div.markup { width:400px; height:200px; text-align:center; line-height:200px; /*same value as height */
}
div.markup img {
/* nothing needed here; you don’t need to know the size of the image. */
}</pre>

Every inline element is usually centered vertically in its surrounding linebox.
As images are inline elements, you can center them very easily a) horizontally by using <code>text-align: center</code> and b) vertically by resizing the linebox using <code>line-height</code>.
James John Malcolm : http://james.gameover.com/

4 January 2007, 15:32 : Permanent link to comment

Steve, that’s coming in Part 2 :)
Also, it’s not pointless, as with this technique you can still apply a link to the image.

Markus, you’d be surprised at how vertical centering via line-height doesn’t give consistent results.

Killian, well noted.
Mauricio Samy Silva : http://www.maujor.com/

5 January 2007, 13:52 : Permanent link to comment

Hi all,
As usual: “There are many ways to achieve the same effect”.
What is the better way?
It depends on your specific layout.
Are my DIV’s sizes fixed? steve method is great.
Do my DIV’s change dinamically? Go with Steve C method.
In case centering in small sized screens are mandatory you should read the Kilian comment.
James pointed out the issue on line-height inconsistences. What about a Google search.
And so on…
Sometimes “pointless articles” might be “pointfull” for someone.
Thanks for all useful comments.
David Levin : http://www.angrysam.com

17 January 2007, 22:57 : Permanent link to comment

There is another way to achieve this “effect” although the image won’t be in a DIV. This tip would be useful for those that want a spaced out border around their image (like a picture frame). As a result the image will always be centered.

Apply the following style to your image:
padding:10px;
border:1px solid black;

the image will now have a border around it that is perfectly centered and spaced by the number of pixels you specify.
Ben : http://

22 January 2007, 17:08 : Permanent link to comment

Why not change the default display of the of the image to block?

img{
display: block;
margin: 0 auto;
}

Commenting is closed for this article.