centering image in div - html

Question

I have a square <div> (70px x 70px) which will contain an image of a variable dimensions(Square, landscape or potrait). I want this image to be symmetrically centered inside the <div>. how do I get it..?
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
The actual size of the image can be greater than 70px x 70px. But it should fit symmetrically in the center.
I also have to make it cross-browser compatible..
Help Appreciated...

Answer 1

Must it be an <img> element?
You can set the image as background of the <div> with background-position:center center - this is very easy to do, not using javascript and cross-browser..
Use it like this:
<div class="img-polaroid" style="width: 70px; height: 70px; background:url('.base_url("images/store/images/".$image->image).') center center no-repeat black; text-align:center;"></div>
Check this Working jsFiddle. In terms of browser support I've never come across a browser that doesn't support this.
It is sure to work on:
Netscape 6+
Mozilla 1+
Firefox 1+
Internet Explorer 4+
Opera 3+
Safari 1+

Answer 2

This will do the trick for u
.img-polaroid img{display:block; margin:0 auto;}

Answer 3

<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
should be
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black;display:table-cell;vertical-align:middle;text-align:center;">
<image src='.base_url("images/store/images/".$image->image).' />
</div>
add display:table-cell;vertical-align:middle;

Answer 4

Use display: table-cell; for your div with your text-align: center; and vertical-align: middle;
Below is the code:
<div class="img-polaroid" style="width: 70px; height: 70px; background-color: black; border: 1px solid yellow; text-align:center; vertical-align: middle; display: table-cell;">
<image src="http://www.gelifesciences.com/gehcls_images/GELS/Link%20Images/Product%20Link%20Images/ImageScanner%20III%2050x50.jpg" />
</div>
and here is the example: http://jsfiddle.net/eUGb6/
Here you can find more about compatibility issues:
vertical-align text-align display

Answer 5

It's very simple to do it vertically/horizontally alignment.
First build a holder div:
.holder {
display: table;
}
Then build a container div:
.container {
display: table-cell;
vertical-align: middle;
text-align: center
}
And in your container, it would be shown everything centered.
I didn't test it yet.. but should work ;p
<div class="holder">
<div class="container">
<img src="YOURIMAGE" />
</div>
</div>

Answer 6

Its easy :)
.img-polaroid {
display:table-cell;
vertical-align: middle
}
check fiddle http://jsfiddle.net/9hppL/2/

Answer 7

You can use the display:inline-block and :after for div, like this:
div {
width: 70px;
height: 70px;
text-align: center;
border: 1px solid green;
}
div:after {
content:"";
display: inline-block;
width:0;
height: 100%;
vertical-align: middle;
}
img {
vertical-align: middle;
}
Please view the demo.Click here, you can look at other solutions.

Answer 8

This is your ultimate guide to centering things in CSS> http://www.w3.org/Style/Examples/007/center
Here is a working jsfiddle: http://jsfiddle.net/9hppL/
.img-polaroid {
display: table-cell;
vertical-align: middle
}
#image {
background: blue;
width: 50px;
height: 50px;
margin-left: auto;
margin-right: auto;
}