12

How I can set center an image element inside a parent div? I would like to do this so that the middle of the image is always in the center of his parent. Also I want the image to always have 100% height (note: I don't want to stretch the image width).

See here for an example: http://jsfiddle.net/Ex5ax/5/

<div class="box">
  <img src='featured.jpg' />
</div>

CSS: 

.box { height: 100%; width: 450px; border: 2px solid red; background: green; overflow: hidden; }
.box img { height: 100%; width: auto; text-align: center; }
Yaakov Ellis
  • 40,752
  • 27
  • 129
  • 174
Caspert
  • 4,271
  • 15
  • 59
  • 104
  • I really don't understand. You say don't want to stretch the width, but the image-size is 640px and the width of parent is 450px. You would at least have to reduce the image-width (stretch) to 450px? – bestprogrammerintheworld Aug 25 '13 at 12:50

6 Answers6

12

Add text-align: center; CSS declaration to the parent .box instead of the children .box img.

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden;
    text-align: center;  /* align center all inline elements */
}

Here is the Fiddle.

Update

It seems there's also a 5px gap under the image, It belongs to the line height reserved characters. To remove that from inline elements like <img> you can use vertical-align: bottom:

.box img {
    height: 100%;
    width: auto;
    vertical-align: bottom; /* <-- fix the vertical gap */
}

JSFiddle Demo #2

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
  • While this does work in the example given, I don't feel that this is a good general answer to the question, because it has the side-effect of centering all text and all images within the parent div. A better solution would be to style only the element that one specifically wants to center, without affecting the entire contents of the parent. `display:block; margin:auto` on the img is one solution which will center only the image and not affect the larger scope of the parent – uglycoyote Sep 17 '21 at 16:38
5

You'll need to move the text-align: center; from the CSS for the image to the CSS for its parent div, so your CSS looks like this:

.box {
    height: 100%;
    width: 450px;
    border: 2px solid red;
    background: green;
    overflow: hidden; 
    text-align:center
}

.box img {
    height: 100%;
    width: auto;
}

And that's it!

Dhruv Kapoor
  • 1,071
  • 8
  • 9
  • I don't know what I do wrong, but the image will not centered in the div: http://jsfiddle.net/Ex5ax/17/ – Caspert Aug 25 '13 at 12:53
2

In case anyone lands up here looking for a solution, here's one using display: flex.

.box {
   display:flex;
   justify-content: center;
   align-items: center;
   background: green;
   border: 2px solid red;
   height: 100%;
   width: 450px;
   overflow: hidden;   
}
.box img {
  justify-content: center;
  align-items: center;
}
flamesquirrel
  • 21
  • 1
  • 6
0

Try giving the image margin property as margin:0 auto, if your parent div has width so the image will be centered as per parent

Ichigo Kurosaki
  • 3,765
  • 8
  • 41
  • 56
0

If you express width in percent, you can center using margins:

.box img {
    width: 80%;
    margin-left: 10%;
    margin-right: 10%;
}
user2001825
  • 1
  • 1
-1

I would add this to .box img.

.box img { margin-left: -25%; margin-top: -25%; }

You would probably need to ajust these per image, or maybe not due to the dimensions.

Lewes
  • 317
  • 1
  • 2
  • 9