Question

我是html的新手，还在学习。我试图保持按钮在中心（div），但我真的不知道我应该怎么做。我用边距放置它。 - 当窗口全屏显示时效果很好，但是当我使窗口变小时，按钮会改变位置。

[抱歉，如果英语不完美xD]

这是按钮（CSS）的代码：

  .signupbutton {


    position:relative;
    margin-left: 880px;
    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0d8f64), color-stop(1, #0d8f64));
    background:-moz-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-webkit-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-o-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-ms-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:linear-gradient(to bottom, #0d8f64 5%, #0d8f64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d8f64', endColorstr='#0d8f64',GradientType=0);

    background-color:#0d8f64;

    -moz-border-radius:14px;
    -webkit-border-radius:14px;
    border-radius:14px;

    border:2px solid #424745;

    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size: 16px;
    font-weight:bold;
    padding:12px 42px;
    text-decoration:none;

    text-shadow:0px -1px 0px #5b6178;

}
.signupbutton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #0d8f64), color-stop(1, #0d8f64));
    background:-moz-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-webkit-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-o-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:-ms-linear-gradient(top, #0d8f64 5%, #0d8f64 100%);
    background:linear-gradient(to bottom, #0d8f64 5%, #0d8f64 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#0d8f64', endColorstr='#0d8f64',GradientType=0);

    background-color:#0d8f64;
}
.signupbutton:active {
    position:relative;
    top:1px;
}

Answer 1

这会将元素保留在其父元素的中心：

margin: 0px auto; width: 100px;

Answer 2

试试这个：

.signupbutton {
    ....
    /*Change display to block*/
    display:block;
    /* Add margin auto*/
    margin: 0 auto;
    /*Set a fixed width*/
    width: 50px; //or whatever width you need

   ....
}

SEE FIDDLE

将按钮（div）保持在中心位置

2 个答案: