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

I am trying to determine how to center (vertically and horizontally) buttons in a div tag.

我试图确定如何在div标签中居中（垂直和水平）按钮。

Given the following CSS:

鉴于以下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;
}

I would like to have the buttons in this markup centered. How can I modify the CSS to achieve this?

我想让这个标记中的按钮居中。如何修改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>

3 个解决方案

#1

set the margins around the object to take up the rest of the space. If you want to center a 50px by 50px div in a 100px by 100px div, then you will set a margin of 25px around the 50px div.

设置对象周围的边距以占据空间的其余部分。如果你想在100px乘100px div中居中50px乘50px div，那么你将在50px div附近设置25px的余量。

#2

Set the items inside your div like so:

设置div中的项目，如下所示：

margin: 0px auto 0px auto; text-align: center;

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

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

** I just did an inline example to show you what I meant.

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

#3

Vertical Centering in CSS

CSS中的垂直居中

You can center the text horizintally using

您可以使用水平中心文本

text-align: center;

#1