中心2 divs与文本

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中

Answer 2

只需添加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;
}

现在看起来应该是这样的：