中心2文本与文本

Question

我尝试水平居中2个divs并对齐它们之间的这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

Answer 2

的CSS只需添加vertical-align:top。另外你可以优化你的CSS ...

http://jsfiddle.net/DgEcs/4/

.container div { 
    vertical-align:top; 
    display:inline-block; 
} 

.red{ 
    font-size: 10px; 
    background:red; 
} 

.blue{ 
    font-size: 26px; 
    background:blue; 
} 

现在看起来应该是这样：