css - divの内容を中央に配置します

Question

オプションを前後に移動するために、2つの選択ボックスとその間にボタンパネルがあります。今は下の最初の画像のように見えます。下の2番目の画像のように、ボタンをリストボックスの中央に垂直に配置したいと思います。

JSFiddleはこちら

どんなヘルプ/ポインタも素晴らしいでしょう。

Answer 1

cssテーブルを使用できます。最初に、この足場が必要です。

.table { display: table; }
.row { display: table-row; }
.cell { display: table-cell; }

[...]

<div class="table">
    <div class="row">
        <div class="cell">Lorem [...]</div>
        [...]
    </div>
</div>

次に、セルの垂直方向の配置は、vertical-align：top | bottom | middle|baselineによって決定されます。内部：行よりも高さが低いセルは、上部または下部のパディングを自動的に受け取ります。これで、セルと行は1に等しくなります。

更新されたコードを見てください：http：//jsfiddle.net/Fq93w/21/。そして、これがIE<=7の回避策です。

#rightListDiv, #controlPanel, #LeftListDiv {
    display: inline;
    zoom: 1;
}

Answer 2

必要に応じて価値を追加margin-topします。更新されたフィドルを参照してください。

http://jsfiddle.net/Fq93w/11/

Answer 3

おそらく、evrythingを1つのdiv内にラップし、controlPanel divのマージントップを％で指定すると、うまくいく可能性があります。