I'm trying to center the strings "1","2" and "3" vertically as seen here:

But when I use display: table-cell; vertical-align: middle; for all 3 div's, but then I get his unwanted result:

HTML is

<div id='alldivs'>
    <div id='red' class='each_div'>1</div>
    <div id='blue' class='each_div'>2</div>
    <div id='green' class='each_div'>3</div>

</div>

CSS is

.each_div { 
     width: 80px;
     height: 50px; 
     text-align: center;
     display: table-cell; vertical-align: middle;
}

Demo

How do I keep the 3 div's aligned vertically while keeping vertical alignment within each div?