Question

我有一个问题，中心将一个按钮放在一个表格的行中。我使用了宽度和边距，但它不起作用。你能帮助我吗？这是该按钮的代码（在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

如果您使用了宽度和保证金：自动并且它仍然没有居中，您可能只需要将display: block添加到.sumb类，如下所示：

.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/

按钮中心定位

3 个答案:

DEMO