align icons with 1 or 2 lines of text to top with css

i have a set of icons, each with 1 or 2 lines of text underneath. i want them to flow next to each other on a page. there is a variable number of icons for each user, so i can't set the number of rows. here's what i have: click for image

now i'm trying to make it so that the icons line up on the horizontal axis, and the text does the same. so even if an item only has 1 line of text, it should have room for two. basically i want to vertically align each item to the top. does that make sense?

i tried various attempts at making the icons vertically align to the top, but nothing worked. any ideas?

here's the basic code:

    <div id="menuicons">

    <div class="menuicon"&开发者_运维技巧gt;<a href="#"><img class="widget_icon" src="images/icon_buses.png" alt="Buses"></a>
<br><span align="center">Buses</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_bugs.png" alt="Report Bugs"></a>
<br><span align="center">Report Bugs</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_directory.png" alt="The Directory"></a>
<br><span align="center">The Directory</span></div>
    <div class="menuicon"><a href="#"><img class="widget_icon" src="images/icon_places.png" alt="Places"></a>
<br><span align="center">Places</span></div>
    more icons, etc...
    </div>

and some css:

#menuicons{
    padding:2px 2px 2px 2px;
    text-align:center;
    position:relative;
}

#menuicons img{
    border:none;
    padding-bottom:2px;
    padding-top:2px;

    height:64px;
}

.menuicon{
    display:inline-block;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px; 
    text-align:center;
    padding:3px 3px 3px 3px;
    width:70px;
    overflow:hidden;

    position:relative;
}
.menuicon span{
    display:block;
    width:78px;
    height:2.1em;
}

Here:

JSFiddle

Added:

.container {
    float:left;
    width: 100px;
}

<div class="container"></div>

Around groups of 2 elements.