Vertical Align Image Inside Div

Question

I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle , if you check in to

http://one1.no-ip.org/index.php?hitta=tanto&page=search

you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is

http://jsfiddle.net/UJATF/ Working example with the image in the middle of the div element

CSS

 .logo{
    background:white;
    position:absolute;

    width:105px;
    height:90px;
    line-height:90px;
    left:180px;
    margin-top:20px;

    line-height:90px;
    text-align:center;

    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;

    box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
    z-index:1000;
    overflow:hidden;    
}
.logo img{
    vertical-align:middle;
    max-width:90px;
    max-height:40px;
}

HTML

<div class="logo">
<a href="./index.php?page=profile&amp;id=377948"><img src="http://www.tantobil.se/images/logo.png"></a>
</div>

so all help would be very much appreciated

Answer 1

Define your anchor link display : inline-block and give to margin-top

as like this

.logo > a {
    display: inline-block;
    margin-top: 22px;
}

Results is

--------

Is your are using dynamic with of img than used to this Second option is

.logo > a {
    display: table-cell;
    height: 90px;
    text-align: center;
    vertical-align: middle;
    width: 105px;
}

Answer 2

Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?

.content is 121px high, .logo is 90px high

The difference is 31px, which means you need a top offset of 15.5px Also, set the .content to position: relative so you position the logo relatively to .content's top.