센터 텍스트와 2 divs

Question

나는 두 divs를 수평 중심에 놓고 그 사이에이 두 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;를 추가합니다. 또한 당신은

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

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

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

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

가 지금은 다음과 같아야합니다 ... 당신의 CSS를 최적화 할 수 있습니다 가