内联块div的对齐不起作用

Question

我正在尝试对齐只包含一个选择的div，如下所示，但它不起作用。

无论我选择哪种垂直对齐方式，都没有任何反应。 下面是class styled-select和select里面的div的css。

div.styled-select {

   width: 100px;
   height: 17px;
   overflow: hidden;
   background: url(../../../../images/downarrow_blue.png) no-repeat right white;   
   display: inline-block;
   position:relative;
   float: left;
   vertical-align: sub
   }

.styled-select select {
   background: transparent; 
   -webkit-appearance: none;
   width: 117px;
   height: 17px;
   border: 0;   
   position: absolute;
   left: 0;
   top: 0;
   }

 // HTML code
 <p/>
 <form action="/prepareUpdateCategoryList.do?forwardto=search">

 <fieldset class="block">

 <label style="width:80px">Class</label>
 <div class="styled-select">
<select>
    <option value="0">Select </option>
    <option value="7382">steam </option>
</select>
</div>

<input type="text" name="fname">
<input type="submit" value="Submit">
</fieldset>
</form>

Answer 1

如果你只是想让它无论如何对齐，那么只需使用margin-top。

div.styled-select {
    width: 100px;
    height: 17px;
    overflow: hidden;
    background: url(../../../../images/downarrow_blue.png) no-repeat right white;   
    display: inline-block;
    position:relative;
    float: left;
    vertical-align: sub;
    margin-top:5px;
}

Fiddle here