центр 2 divs с текстом

Question

Я пытаюсь центрировать по горизонтали 2 divs и выровнять эти 2 divs между ними. Проблема возникает, когда я помещаю текст разного размера в каждый 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

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

Теперь он должен выглядеть следующим образом: