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; 添加到 .red 和 .blue 的 CSS 中