inline-block的元素對齊問題

http://jsfiddle.net/z3Jue/20/inline-block的元素對齊問題

我不能讓我的所有（inline-block的）的元素，對準自己的div容器的頂部。

我已經嘗試列表中的這些項目，向左漂浮（但不能居中）和很多其他隨機事物，但似乎沒有任何工作。

任何幫助表示讚賞！

CSS

#buttons{ 
    margin: 0 auto; 
    padding:0px; 
    border:1px dotted black; 
    height:60px; 
} 

.block img{ 

    display:inline-block; 
    *display: inline; 
    zoom: 1; 
    height:60px; 
    width:40px; 
    border:0; 

} 

.block{ 
    display:inline-block; 
    *display: inline; 
    zoom: 1; 
    border:1px solid red; 
    height:60px; 
    width:40px; 
    margin:0px; 
    padding:0px; 
} 

#search { 
    display:inline-block; 
    *display: inline; 
    zoom: 1; 
    height:60px; 
    width:240px; 
    border:1px solid red; 
    margin:0px; 
    padding:0px; 
} 

#searchTextForm{ 
    font-size:16px; 
    width: 185px; 
    color:#333; 
    margin-top:3px; 
    border:1px dotted blue; 
    margin-top:15px; 
}

HTML

<div id="buttons" align="center"> 
<div id="search" > 
    <form method="get" name="tipue" action="search/results.html" target="toolbarlongTOC" title="search"> 
    <input type="text" id="searchTextForm" name="d" class="field" size="25" > 
    </form> 
</div> 
<div class="block">1</div> 
<div class="block">2</div> 
<div class="block">3</div> 
<div class="block"> 

    <a href="#" id="bookmarks"> 
     <img src="http://i.imgur.com/cbb92jF.jpg"> 
    </a> 

    </div> 
<div class="block">3</div>

來源

2013-03-05 nosleep