Having trouble centering an image in CSS

Question

I am trying to horizontally center an image within a div. However, I haven't been able to. I've tried setting the vertical-align to middle and the margin to auto, 0 auto, and every variation I can think of. Nothing works. Here is the code for how it is currently set up:

img {
border: 0;
margin: 0 auto;
}

.intro img {
border-radius: 50%;
vertical-align: middle;
padding: 10px;
}

The image is in the intro div. Any advice you can give would be helpful.

Possible duplicate of [How to center images on a web page for all screen sizes](http://stackoverflow.com/questions/5901789/how-to-center-images-on-a-web-page-for-all-screen-sizes) — Youka, Feb 25 '16 at 22:49
If you are in fact trying to horizontally center it, you're close. You just need to add a width to the image in order for `margin: 0 auto;` to work. — jameson, Feb 25 '16 at 22:55
I meant horizontally center. I just wasn't finding any solutions that worked in any of the previously created tags. I did find the solution in the link Youka posted, so thanks! — B. Allred, Feb 26 '16 at 18:36

John Slegers · Answer 1 · 2016-02-25T23:15:05.130

If you want to center your image both horizontally & vertically, this should do the trick :

 .intro {
    display: table;
    width: 500px; /* works with any width */
    height: 150px; /* works with any height */
    background: #ccc;
}

.imgcontainer {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

img {
    background: #fff;
    padding: 10px;
    border-radius: 50%;
}

<div class="intro">
   <div class="imgcontainer">
     <img src="http://s.gravatar.com/avatar/bf4cc94221382810233575862875e687?r=x&s=50" />
   </div>
</div>

score 1 · Answer 2 · answered Feb 25 '16 at 22:55

Use position:relative in parent .intro and use the code shown below in img, it will work with any width and height

  display:block;
  margin:auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0

Snippet

.intro {
  border: dashed red; /* demo */
  display:inline-block; /* demo */
  vertical-align:top; /* demo */
  position: relative
}
.intro img {
  border-radius: 50%;
  vertical-align: middle;
  display: block;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0
}
.intro:first-of-type {
  width: 200px;
  height: 200px;
}
.intro:last-of-type {
  width: 400px;
  height: 300px;
}

<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>
<div class="intro">
  <img src="//lorempixel.com/100/100" />
</div>

score 1 · Answer 3 · edited May 23 '17 at 11:59

1

The css style margin: 0 auto; should do the horizontal part of the trick. For the vertical part you also need to take care of the parent. Look at How to vertically align an image inside div for more info.

edited May 23 '17 at 11:59

Community

1
1

answered Feb 25 '16 at 22:58

E.C.Pabon

265
1
9

score 0 · Answer 4 · answered Feb 25 '16 at 22:55

0

vertical-align works only in table cells. Try to use Flexbox. The element containing your image should have CSS properties:

display: flex;
align-items: center;

answered Feb 25 '16 at 22:55

mjzr

241
1
3
8

you are wrong, ´vertical-align´ **applies to** *inline-level and table-cell elements. It also applies to `::first-letter` and `::first-line`*. [vertical-align in MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/vertical-align) – dippas Feb 25 '16 at 23:01
So after all not entirely wrong :) Anyway, won't work the way he did it. – mjzr Feb 25 '16 at 23:15

Having trouble centering an image in CSS

4 Answers4

Snippet