如何在div标签中居中(垂直和水平)按钮?
问题描述:
我想确定如何在div标签中居中(垂直和水平)按钮。如何在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>
答
文本设置页边距周围的对象占用的空间休息。如果你想在100px×100px的div中居中放置一个50px×50px的div,那么你将在50px div周围设置25px的边距。
答
设置项目的DIV中,像这样:
保证金:0px auto的0px auto的; text-align:center;
<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">
**我只是做了一个内联示例来向你展示我的意思。
...如果你的盒子的宽度是可变的,你可以设置保证金 - 左:25%和保证金 - 右:25%,它工作正常。 – salgua 2011-09-01 11:27:39