css - 2 div をテキストで中央揃え

Question

水平方向に 2 つの div を中央に配置し、これらの 2 つの div をそれらの間に配置しようとしています。問題は、各 div に異なるサイズのテキストを配置すると発生します。例を次に示します: http://jsfiddle.net/DgEcs/1/

赤い div が下に移動する理由とその解決方法を教えてください。
CSS:

.container{
    margin: 20px auto;
    height: 50px; line-height: 50px;
    text-align: center; /* to center red and blue */
    background: whiteSmoke;
}
.red{ 
    display:inline-block; /* to put it side by side */
    font-size: 10px;
    background:red;
}
.blue{ 
    display:inline-block; /* to put it side by side */
    font-size: 26px;
    background:blue;
}

HTML:

<div class="container" >
    <div class="red"> aaaaaaa </div>
    <div class="blue"> bbbbbbb </div>
</div>

Answer 1

とvertical-align: top;の両方の CSS に追加します。.red.blue