Andre asks the CSS Guy how to center an image in a div

Andre writes:

how do you center images inside a div with css?

Andre, here’s one way. If your html looks like this:

<div>
   <img src="elephant_ball.jpg" alt="" />
</div>

Apply display:block; to the image, and also make sure it’s left and right margins are set to “auto”, like so:

<style type="text/css">
div img {
   display:block;
   margin:auto;
}
</style>

That should do it. View the example.

I hope you didn’t mean “vertical” centering…

…because right now, there’s no elegant and easy way to do it that’s acceptable to all browsers. Below are some possible options to look into – pick your poison.