中心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; 
} 

現在看起來應該是這樣：