1

I think this question has been asked many a times but I've been searching the web for a whole day now and cannot find a single good solution. I want to centre an image inside a div so that it looks like a frame. I have images of different sizes, some are portrait, some landscape. I want them to be centered horizontally and vertically and that it does not overflow the container if the size is larger. Now I've read about div vs table designs but seriously, right now I just want the job done, so any solution would be greatly appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Khizar
  • 2,288
  • 5
  • 32
  • 53

2 Answers2

3

Check the demo - http://jsfiddle.net/x6jDu/

table-cell has IE8+ support

Dipak
  • 11,930
  • 1
  • 30
  • 31
3

You can achieve it by clicking the demo link below:

DEMO http://jsfiddle.net/rathoreahsan/99BXT/

NOTE:

  1. Cons: By using display:table-cell will not work below Internet Explorer 8 browsers, rest of browsers will except it. Pros: It will work also by using fixed width and fixed height.

  2. Pros: By using display:block will work on all browsers. Cons It will not work by using fixed width and fixed height. But you may manage it with same padding for (top, right, bottom, left) as mentioned in this demo

Ahsan Rathod
  • 5,465
  • 2
  • 21
  • 25