如何在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;"> 

**我只是做了一个内联示例来向你展示我的意思。

Answer 3

Vertical Centering in CSS

可以居中horizintally使用

text-align: center;