将div的内容放在中心位置

Question

我有两个选择框和一个按钮面板，可以来回移动选项。 现在它看起来像下面的第一个图像，我想将按钮垂直对齐在中心，列表框如下面的第二个图像

JSFiddle here

任何帮助/指针都会很棒。

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确定。引擎盖下：高度低于行的单元格自动接收顶部或底部填充。有了它，一个单元格和一行等于一。

查看更新的代码：http://jsfiddle.net/Fq93w/21/。以下是IE＆lt; = 7：

的解决方法

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

Answer 2

根据您的需要添加margin-top值，请参阅更新的小提琴：

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

Answer 3

可能在一个div中包装evrything并为controlPanel div给出margin％top，可能适合你。