Vertical Alignment in a Block Element

by audetwebdesign

HTML

<div id="main"> 
    <img class="mid" src="http://i1207.photobucket.com/albums/bb466/audetwebdesign/jsFiddle%20Demos/Puffins.jpg" width="100" height="100" />
</div>

CSS

#main {
    outline: 1px solid blue;
    height: auto;
    line-height: 400px;
    text-align: center;
}
#main .top {
    vertical-align: top;
}
#main .mid {
    vertical-align: middle;
}
#main .bot {
    vertical-align: bottom;
}