Question

I’m trying to align a div containing only one select as shown below, but it does not work.

No matter what option I choose for vertical-align, nothing happens.
Below is the css for the div of class styled-select and the select inside.

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

if u just want it to align no matter how, then just use 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