對齊塊元素的頂部

Question

我的HTML5/CSS所呈現如下：http://imgur.com/0rixh

使用下面的代碼：

   <li> 
        <div class="name">Booger Jet.zip</div> 
        <progress max="100" value="60"></progress> 
        <div class="control"></div> 
        <div class="status">12 MB/21 MB 240 kB/s</status> 
       </li> 

#uploads li progress { 
    width: 317px; 
    margin-bottom: 4px; 
} 

#uploads li .control { 
    width: 14px; 
    height: 14px; 
    display: inline-block; 
    opacity: 0.6; 
    background-image: url('../img/stop_button.png'); 
} 

如何垂直對齊他們？我有什麼選擇？謝謝！

Answer 1

嘗試

#uploads li progress { 
    width: 317px; 
    margin-bottom: 4px; 
    margin-top:1px; /* change it if you need more top sapce*/ 
} 
#uploads li .control { 
     width: 14px; 
     height: 14px; 
     display: inline-block; 
     vertical-align:top; 
     opacity: 0.6; 
     background-image: url('../img/stop_button.png'); 
    } 

Answer 2

您可以使用垂直對齊：中等爲此。

#uploads li .control, #uploads li progress{ 
display:inline-block; 
vertical-align:middle; 
}