Horizontal alignment of an image

Question

I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.

Solution 1

Wrap the image inside an element and use text-align: center;...

Demo

<div class="center">
    <img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>

.center {
   text-align: center;
}

Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property

img {
   width: 276px;
   display: block;
    margin: auto;
}

Demo 2

Solution 2

Try this css to horizontally center

display: block;    
margin: 0 auto;

= the top and bottom margin 0, and the left and right margin auto

Solution 3

Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.

  <div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>