Issue with vertical alignment

Question

I'm struggling to get my logo and menu items vertically aligned in my header. Could you please hep me? (note that the header height changes when users scroll down by 100px and I'd like to keep the logo and menu vertically aligned based on the height of the header). Many thanks

http://jsfiddle.net/pPx62/

<div class="header big-height">
<div class="logo">Logo</div>

<ul class="drop_menu">
<li><a href='#'>Link 1</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    </ul>
</li>
<li><a href='#'>Link 2</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
<li><a href='#'>Link 3</a>
    <ul>
    <li><a href='#'>Sub Link 1</a></li>
    <li><a href='#'>Sub Link 2</a></li>
    <li><a href='#'>Sub Link 3</a></li>
    <li><a href='#'>Sub Link 4</a></li>
    </ul>
</li>
</ul>
        </div>
        <!-- end header-->
<div class="spacer"></div>
<div class="block"></div>
<div class="block"></div>


.big-height {
    height: 120px;
      -webkit-transition-duration: 400ms;
        -webkit-transition-function: linear;
}

.short-height {
    height: 80px;
      -webkit-transition-duration: 400ms;
        -webkit-transition-function: linear;
}




.header {
    width: 100%;
    background: #fff;
    color: #124191;
    font-weight: 300;
    font-size: 28px;
    display: table;
        position: fixed;
        z-index: 999999;
        opacity: 0.7;
    background: aqua;


}

.logo {
display: inline-block;
vertical-align: middle;
left:0;
color: #333;
font-size: 30px;
font-weight: 800;
letter-spacing: -1px;
margin-left: 60px;
background: red;
}

 .drop_menu {
    padding:0;
    margin:0;
    list-style-type:none;
    float: right;
    vertical-align: middle;
        display: table;

}

.drop_menu li { 
    display: table-cell;
    vertical-align: middle;
    float:left;
}

.drop_menu li a {
    padding:9px 20px;
    display:block;
    color:#666;
    text-decoration:none;
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;



}

/* Submenu */
.drop_menu ul {
    position:absolute;
    left:-9999px;
    top:-9999px;
    list-style-type:none;
}
.drop_menu li:hover { position:relative; background:#5FD367; }
.drop_menu li:hover ul {
    left:0px;
    top:30px;
    background:#5FD367;
    padding:0px;
}

.drop_menu li:hover ul li a {
    padding:5px;
    display:block;
    width:168px;
    text-indent:15px;
    background-color:#5FD367;
}
.drop_menu li:hover ul li a:hover { background:#005555; }

.block {
    height: 800px;
    background: green;
    width:100%;
    margin-top: 5px;

}

JS

$(function() {
    var header = $(".header");
    $(window).scroll(function() {   
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            header.removeClass('big-height').addClass("short-height");

        } else {
            header.removeClass("short-height").addClass('big-height');

        }
    });
});


$(document).ready(function() {
var headerHeight = $(".header").height();
$(".spacer").css({"height": headerHeight+"px"});
});

Answer 1

Easiest way would be to specify a line-height equal to the height:

.big-height {
    height: 120px;
    line-height: 120px;
    ...
}

.short-height {
    height: 80px;
    line-height: 80px;
    ...
}

Check this updated fiddle of yours: http://jsfiddle.net/pPx62/1/

Update:

Regarding your question about logo image, using the same markup as you already have, the easiest way would be to use vertical-align on the img and make the logo div as display:table-cell.

Check this updated fiddle: http://jsfiddle.net/pPx62/2/

HTML:

<div class="logo">
    <img src="yourimagehere" />
</div>

CSS:

.logo {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    ...
}

.logo > img { vertical-align: middle; }