Question

I have an image inside a div like this

<div><img /><div>

The image is dynamic of no fixed size. The div is of size 200px by 200px. The image size is not known beforehand. If the size of the image is greater than 190px by 190px, set it to 190px by 190px (that is, max-width:190px, max-height:190px). How can I center the image with these needs satisfied? I need a solution working in Internet Explorer 7 too.

The solution here and here can not be applied to my problem because

1. It is not certain that the image would be less than 200 pixels.

2. I want horizontal alignment too.

3. No Internet Explorer 7 support.

(Some questions have been asked on Stack Overflow regarding the same, but my scenario is different, so they are not applicable for this particular problem.)

Answer 1

The solution is to change the div into a table. Normally, you shouldn’t use tables for positioning, but when it comes to older non-standards-compliant browsers, sometimes that’s the only choice. Demonstration here. For the record, this works on Internet Explorer 6, as well.

Code:

CSS

#theDiv
{
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}​

​HTML

<table id="theDiv" style="border: solid 1px #000">
    <tr>
        <td>
    <img id="theImg" src="http://cdn1.sbnation.com/community_logos/9156/gangreen-small.jpg" />
        </td>
    </tr>
</table>

Here’s an update that uses CSS instead of changing the markup to an actual table:

#theDiv
{
    display: table;
    width: 200px;
    height: 200px;
    text-align: center;
    vertical-align: middle;
}
#theImg
{
    max-width: 190px;
    max-height: 190px;
}

.tr {
  display: table-row;
}
.td { 
  display: table-cell;
  vertical-align: middle;
}

<div id="theDiv" style="border: solid 1px #000">
    <div class="tr">
        <div class="td">
    <img id="theImg" src="http://lorempixel.com/100/100/" />
        </div>
    </div>
</div>