Question

I have two listbox where I am moving data of one box to another. Listbox I have are as below.

<select id="sourceCars" class="car" size="20" >
    <option>User 1 </option>
    <option>User 2 </option>
    <option>User 3 </option>
    <option>User 4 </option>
    <option>User 5 </option>
</select>

<input type="button" value=" >> " id="moveRight">
<input type="button" value=" << " id="moveLeft">
<select id="targetCars" class="car" size="20" >
</select>​

What I want is, take buttons >> << to the center of listbox and not at the bottom on the listbox.

Any idea how to get this done?

jsfiddle

Answer 1

input {
 position:relative;
 top:-150px;

}

Note that -150px should be replaced with half of the select height. Adding some class to those buttons will ease things up. For example:

.moveBtn {
  position:relative;
  top:-150px;
}