html - ボタンをリストボックスの中央に揃える方法

Question

あるボックスのデータを別のボックスに移動する2つのリストボックスがあります。私が持っているリストボックスは以下の通りです。

<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>​

私が望むのは、 >> <<リストボックスの下部ではなく、リストボックスの中央にボタンを配置することです。

これを行う方法はありますか？

jsfiddle

Answer 1

 <div class="butts">   
       <input type="button" value=" >> " id="moveRight">
       <input type="button" value=" >> " id="moveRight">
 </div>

.car{
    float:left;
}
.butts{
    margin-top:150px;
    width:70px;
    float:left;
}​

jsフィドル

Answer 2

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

}

-150px は、選択した高さの半分に置き換える必要があることに注意してください。これらのボタンに何らかのクラスを追加すると、物事が楽になります。例えば：

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

Answer 3

位置を絶対値として使用し、左と上の値を設定します。

ここのコードを参照してください: http://jsfiddle.net/yFxBc/8/

Answer 4

中央に設定するには、このcssコードを使用します

margin:0 auto;
width:250px;