css - 如何在 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

设置对象周围的边距以占据剩余空间。如果您想将 50px x 50px 的 div 居中放置在 100px x 100px 的 div 中，那么您将在 50px div 周围设置 25px 的边距。