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.

False. The `center` tag will work, it just isn't semantic anymore. HTML5 depreciated the tag, for a good cause. — Cody Guldner, Jul 09 '13 at 05:58

score 7 · Answer 1 · answered Jul 09 '13 at 05:04

7

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

answered Jul 09 '13 at 05:04

Mr. Alien

153,751
34
298
278

The alternative solution with "display: block;" and "margin: auto;" worked fine for me. – Ricardo Barroso May 15 '17 at 16:12
From Praveen's answer, it looks like `width` is not needed. – Rodrigo Jun 27 '18 at 21:44

Praveen · Answer 2 · 2013-07-09T05:36:32.330

5

Try this css to horizontally center

display: block;    
margin: 0 auto;

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

edited Jul 09 '13 at 05:36

answered Jul 09 '13 at 05:05

Praveen

55,303
33
133
164

I don't know who up voted this.. but this is completely wrong, `img` is an inline element by default, you cannot use `margin: 0 auto;` to center it – Mr. Alien Jul 09 '13 at 05:18
@Mr.Alien It worked for me. Took a sample from your [jsfiddle](http://jsfiddle.net/8ajQJ/2/) – Praveen Jul 09 '13 at 05:26
1

Because you are using display block :) and you've mentioned no where in your answer that you should use `display: block;` in order to work :) – Mr. Alien Jul 09 '13 at 05:32
1

@Mr.Alien Sorry. I should've added it. Thanks :) for pointing my mistake. I will update my answer. – Praveen Jul 09 '13 at 05:35
1

Yea, even I've used that, so I've mentioned it :) – Mr. Alien Jul 09 '13 at 05:36

score 1 · Answer 3 · answered Jul 09 '13 at 05:04

1

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>

answered Jul 09 '13 at 05:04

Dave

5,133
21
27

score 0 · Answer 4 · edited Nov 07 '16 at 19:52

0

If your element has the width property , then give it margin:auto;.

edited Nov 07 '16 at 19:52

Synthiatic

261
1
16

answered Jul 09 '13 at 05:04

Pumpkinpro

837
4
5

score 0 · Answer 5 · answered Jul 09 '13 at 05:07

0

Depending on your specific situation, this has worked for me on several projects:

<style>
    .outer{float: left; position: relative; left: 50%;}
    .inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
     <div class="inner">content you want to center, image, text, whatevs</div>
</div>

answered Jul 09 '13 at 05:07

Ryan

3,153
2
23
35

There is a slightly different method to this, involving left and margin-left working together (against each other actually) in the same way, but it requires setting the exact half of the image size which doesn't work as well in some cases. – Ryan Jul 09 '13 at 05:08

score 0 · Answer 6 · answered Jul 09 '13 at 05:15

The IMG element is inline, by default. So, as the others have pointed, you have two options:

1) Keep it inline, and use text-align: center;.

2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.

Horizontal alignment of an image

6 Answers6