如何在div标签中居中(垂直和水平)按钮？

Question

我试图确定如何在div标签中居中(垂直和水平)按钮.

鉴于以下CSS:

div.listBoxMoverUserControl
{
    width: 350px;
    height: 175px;
}

div.listBoxMoverUserControl div 
{
    height: 150px;
}

div.listBoxMoverUserControl div select
{
    width: 150px;
    height: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column1
{
    float: left;
    width: 150px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column2
{
    float: left;
    width: 50px;
}

div.listBoxMoverUserControl div.listBoxMoverUserControl_column3
{
    float: left;
    width: 150px;
}

我想让这个标记中的按钮居中.如何修改CSS来实现这一目标？

<div class="listBoxMoverUserControl">
    <div class="listBoxMoverUserControl_column1">
        <label>Test1</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
    <div class="listBoxMoverUserControl_column2">
        <input id="btnMoveRight" type="button" value="->" /> <br />
        <input id="btnMoveLeft" type="button" value="<-" /> <br />
    </div>
    <div class="listBoxMoverUserControl_column3">
        <label>Test2</label>
        <asp:ListBox runat="server"></asp:ListBox>
    </div>
</div>

Answer 1

设置对象周围的边距以占据剩余的空间.如果你想在一个100px乘100px div中居中50px乘50px div,那么你将在50px div附近设置25px的余量.

Answer 2

设置div中的项目如下:

保证金:0px auto 0px auto; text-align:center;

<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">

**我刚刚做了一个内联示例来向您展示我的意思.