0

Possible Duplicate:
Vertical centering variable height image while maintaining max-width/height

So here is a question, I've got image of not fixed size, I know only that the height or width must be 200px. Now I want to put this image in div which is fixed size 200px x 200px and center it vertically and horizontally. Is it possible?

I searched a lot of questions but none of them answered mine, which should be crushial to solve them all.

Awais
  • 4,752
  • 4
  • 17
  • 40
oneat
  • 10,778
  • 16
  • 52
  • 70
  • Height **or** width? How would it fit in the `div`? – Chris Oct 08 '12 at 18:28
  • Have you tried `text-align: center;` and `line-height: 200px` – jsweazy Oct 08 '12 at 18:31
  • Have you checked [this][1]? [1]: http://stackoverflow.com/questions/7336503/how-to-vertical-align-image-inside-div Let me know if that does not work. – Srikanth B Oct 08 '12 at 18:32
  • dix is 200px x 200px, once image's width is 200px so I want it to be aligned vertically and once its height's 200px so I want to align it horizontally. All to be in center. – oneat Oct 08 '12 at 18:36
  • See http://stackoverflow.com/questions/6282968/vertical-centering-variable-height-image-while-maintaining-max-width-height/6284195#6284195 – 0b10011 Oct 08 '12 at 18:53

2 Answers2

5

Basic idea taken from this answer. Doesn't rely on display:table-cell; which isn't supported by IE7.

The Code (demo)

<div class="image-wrapper"><img src="http://example.com/image.png"></div>

.image-wrapper {
    position:relative;
    width:200px;
    height:200px;
}
.image-wrapper img {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    margin:auto;
}
Community
  • 1
  • 1
0b10011
  • 18,397
  • 4
  • 65
  • 86
1

You can make it display like a table cell:

http://jsbin.com/ijoved/1/

/* This is item wrapping each image */
.item { 
  height: 200px;
  width: 200px;
  display:table-cell;
  vertical-align:middle;
  text-align: center;
}
jsweazy
  • 1,623
  • 9
  • 22