保持一个按钮（div）在中心

即时通讯新的在HTML和仍在学习。我试图保持一个按钮在中心（div），但我真的不知道我该怎么做。我用边缘来放置它。 - 当窗口全屏显示时效果很好，但当窗口变小时，按钮会改变位置。保持一个按钮（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; 
}

来源

2013-08-25 user2713996

这将保持一个元素在其父的中心：

来源

2013-08-25 10:37:22 slash197

嘿，谢谢你这么快回答！：D无论如何，如果我有测试窗口全屏幕，这两个答案都能正常工作。但是，当我调整窗口的大小时，按钮会完全改变位置：S – user2713996

试试这个：

.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

来源

2013-08-25 10:43:05 Tomer

嘿，谢谢你这么快回答！：D无论如何，如果我有测试窗口全屏幕，这两个答案都能正常工作。但是，当我调小窗口的大小时，按钮会完全改变位置：S – user2713996

我刚刚再次测试了小提琴，当我更改窗口大小时，按钮仍保留在中间位置。 – Tomer

你是完全正确的，它的工作原理。我做了一个全新的html和css文件，只添加了我需要的元素，现在它完美的工作:)感谢。有一个地方我应该标记这个“线程”的回答或什么？ – user2713996

保持一个按钮（div）在中心

回答

相关问题