How to vertically align an image inside a div

Total
0
Shares

How can you align an image inside of a containing div?

Example

In my example, I need to vertically center the <img> in the <div> with class ="frame":

<div class="frame" style="height: 25px;">
    <img src="http://jsfiddle.net/img/logo.png" />
</div>

.frame‘s height is fixed and the image’s height is unknown. I can add new elements in .frame if that’s the only solution. I’m trying to do this on Internet  Explorer 7 and later, WebKit, Gecko.

See the jsfiddle here.

_x000D_

_x000D_

.frame {
    height: 25px;      /* Equals maximum image height */
    line-height: 25px;
    width: 160px;
    border: 1px solid red;

    text-align: center;
    margin: 1em 0;
}
img {
    background: #3A6F9A;
    vertical-align: middle;
    max-height: 25px;
    max-width: 160px;
}

_x000D_

<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=250 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=25 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=23 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=21 />
</div>
<div class=frame>
   <img src="http://jsfiddle.net/img/logo.png" height=19 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=17 />
</div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=15 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=13 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=11 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=9 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=7 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=5 />
 </div>
<div class=frame>
    <img src="http://jsfiddle.net/img/logo.png" height=3 />
 </div>

_x000D_

_x000D_

_x000D_


Solution

The only (and the best cross-browser) way as I know is to use an inline-block helper with height: 100% and vertical-align: middle on both elements.

So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/

_x000D_

_x000D_

.frame {_x000D_
    height: 25px;      /* Equals maximum image height */_x000D_
    width: 160px;_x000D_
    border: 1px solid red;_x000D_
    white-space: nowrap; /* This is required unless you put the helper span closely near the img */_x000D_
_x000D_
    text-align: center;_x000D_
    margin: 1em 0;_x000D_
}_x000D_
_x000D_
.helper {_x000D_
    display: inline-block;_x000D_
    height: 100%;_x000D_
    vertical-align: middle;_x000D_
}_x000D_
_x000D_
img {_x000D_
    background: #3A6F9A;_x000D_
    vertical-align: middle;_x000D_
    max-height: 25px;_x000D_
    max-width: 160px;_x000D_
}

_x000D_

<div class="frame">_x000D_
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=250px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=25px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=23px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=21px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span><img src="http://jsfiddle.net/img/logo.png" height=19px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=17px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=15px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=13px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=11px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=9px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=7px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=5px />_x000D_
</div>_x000D_
<div class="frame">_x000D_
    <span class="helper"></span>_x000D_
    <img src="http://jsfiddle.net/img/logo.png" height=3px />_x000D_
</div>

_x000D_

_x000D_

_x000D_

Or, if you don’t want to have an extra element in modern browsers and don’t mind using Internet Explorer expressions, you can use a pseudo-element and add it to Internet Explorer using a convenient Expression, that runs only once per element, so there won’t be any performance issues:

The solution with :before and expression() for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/

_x000D_

_x000D_

.frame {_x000D_
    height: 25px;      /* Equals maximum image height */_x000D_
    width: 160px;_x000D_
    border: 1px solid red;_x000D_
    white-space: nowrap;_x000D_
_x000D_
    text-align: center;_x000D_
    margin: 1em 0;_x000D_
}_x000D_
_x000D_
.frame:before,_x000D_
.frame_before {_x000D_
    content: "";_x000D_
    display: inline-block;_x000D_
    height: 100%;_x000D_
    vertical-align: middle;_x000D_
}_x000D_
_x000D_
img {_x000D_
    background: #3A6F9A;_x000D_
    vertical-align: middle;_x000D_
    max-height: 25px;_x000D_
    max-width: 160px;_x000D_
}_x000D_
_x000D_
/* Move this to conditional comments */_x000D_
.frame {_x000D_
    list-style:none;_x000D_
    behavior: expression(_x000D_
        function(t){_x000D_
            t.insertAdjacentHTML('afterBegin','<span class="frame_before"></span>');_x000D_
            t.runtimeStyle.behavior = 'none';_x000D_
        }(this)_x000D_
    );_x000D_
}

_x000D_

<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=250px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=25px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=23px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=21px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=19px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=17px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=15px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=13px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=11px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=9px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=7px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=5px /></div>_x000D_
<div class="frame"><img src="http://jsfiddle.net/img/logo.png" height=3px /></div>

_x000D_

_x000D_

_x000D_


How it works:

  1. When you have two inline-block elements near each other, you can align each to other’s side, so with vertical-align: middle you’ll get something like this:

    Two aligned blocks

  2. When you have a block with fixed height (in px, em or another absolute unit), you can set the height of inner blocks in %.

  3. So, adding one inline-block with height: 100% in a block with fixed height would align another inline-block element in it (<img/> in your case) vertically near it.

Source: StackOverflow.com

Leave a Reply

Your email address will not be published. Required fields are marked *