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](http://jsfiddle.net/yFxBc/)
--------------------------------------