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.
.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;
}
<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>
Best Answer
The only (and the best cross-browser) way as I know is to use an
inline-block
helper withheight: 100%
andvertical-align: middle
on both elements.So there is a solution: http://jsfiddle.net/kizu/4RPFa/4570/
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
andexpression()
for Internet Explorer: http://jsfiddle.net/kizu/4RPFa/4571/How it works:
When you have two
inline-block
elements near each other, you can align each to other's side, so withvertical-align: middle
you'll get something like this:When you have a block with fixed height (in
px
,em
or another absolute unit), you can set the height of inner blocks in%
.inline-block
withheight: 100%
in a block with fixed height would align anotherinline-block
element in it (<img/>
in your case) vertically near it.