题
我试图确定如何中心(垂直和水平)中的按钮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>
解决方案
设置在物体周围边缘占用的空间的其余部分。如果你想通过50像素格在100像素100像素的div居中50像素,那么你将设置25px的保证金周围的50像素DIV。
其他提示
设置DIV里面的物品,像这样:
余量:0px auto的0px auto的; 文本对齐:中心;
<div class="listBoxMoverUserControl_column1" style="margin: 0px auto 0px auto; text-align: center;">
**我只是做了一个内嵌例子向您展示了我的意思。
下面是一个使用CSS变换的溶液(不得不为了添加一个容器class="button_group"
在中间列中的两个输入元素正确地居中它们):
div,
label,
button_group {
border: 1px solid blue;
}
*,
*:before,
*:after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
div.listBoxMoverUserControl {
width: 352px;
height: 150px;
}
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;
}
div.listBoxMoverUserControl_column1,
div.listBoxMoverUserControl_column2,
div.listBoxMoverUserControl_column3 {
/* centering */
position: relative;
}
/* centering */
.button_group {
height: auto !important;
}
div label,
.button_group {
/* centering */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
}
<div class="listBoxMoverUserControl">
<div class="listBoxMoverUserControl_column1">
<label>Test1</label>
</div>
<div class="listBoxMoverUserControl_column2">
<div class="button_group">
<input id="btnMoveRight" type="button" value="->" /> <br />
<input id="btnMoveLeft" type="button" value="<-" /> <br />
</div>
</div>
<div class="listBoxMoverUserControl_column3">
<label>Test2</label>
</div>
</div>
不隶属于 StackOverflow