按键中心定位

Question

我在 table.I 使用的宽度和边距中将连续的按钮居中定位时遇到问题，但 work.Can 你能帮帮我吗？这是该按钮的代码（在 css 中）：

 .subm {
position:relative;
width:130px;
margin-left:auto;
margin-right:auto;
background-image:url('background.bmp');
border:none;
color:white;
opacity:1;
height:25px;
outline:0 none;
box-shadow:1px 1px 2px black

}
.subm:hover {
background-image:none;
background-color:darkgray;
box-shadow:10px 10px 10px black
}

.subm:active {
color:black ;
font-weight:bold;
width:128px;
height:24px;
background-image:none;
background-color:dimgray;
}

Answer 1

试试这个

button{
    height:20px; 
    width:100px; 
    position:relative;
    top:50%; 
    left:50%;
}

如果只是水平对齐，请使用

button{
    margin: 0 auto;
}

DEMO

Answer 2

为此，我将使用以下代码：

.subm {
  position:absolute;
  width:130px;
  height:25px;
  top: calc(50% - 13px); // 50% - 0.5 * height.
  left: calc(50% - 65px); // 50% - 0.5 * width.
}

对于家长：

position: relative;

可以看到a working JSFiddle here

Answer 3

如果您使用了 width 和 margin: auto 并且它仍然没有居中，您可能只需要将 display: block 添加到您的 .sumb class 中，如下所示：

.subm {
    display:block;
    position:relative;
    width:130px;
    margin-left:auto;
    margin-right:auto;
    background-image:url('background.bmp');
    border:none;
    color:white;
    opacity:1;
    height:25px;
    outline:0 none;
    box-shadow:1px 1px 2px black
}

演示：http://jsfiddle.net/re079odr/

按键中心定位

Button center positioning

css

DEMO