html - 使用 html 在包装器内对齐 CSS3 按钮

Question

我有一个简单的 css3 按钮，我需要在我的包装器内对齐这个按钮，如图所示。

如果我使用下面的代码，我可以做到，但每当我调整浏览器大小时，它并没有固定在它的位置，而是随着浏览器移动。

这是我的包装代码:

.Wrapper
{
    position: absolute;
    left: 38%;
    width: 914px;
    height:584px;
    margin-top: 50px;
    margin-left: -266px;
    padding: 15px;
    border: 1px solid #99CCFF;
    background-color: #FFFFFF;
}

这是我的 CSS3 按钮代码:

   .button, .button span {
    display: inline-block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.button {
    white-space: nowrap;
    line-height:1em;
    position:absolute;
        top:443px;
        left:1030px;
    outline: none;
    overflow: visible; /* removes extra side padding in IE */
    cursor: pointer;
    border: 1px solid #999;/* IE */
    border: rgba(0, 0, 0, .2) 1px solid;/* Saf4+, Chrome, FF3.6 */
    border-bottom:rgba(0, 0, 0, .4) 1px solid;
    -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
    box-shadow: 0 1px 2px rgba(0,0,0,.2);
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .1) 0%,
        rgba(0, 0, 0, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(0, 0, 0, .1)),
        to(rgba(255, 255, 255, .1))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#19FFFFFF', EndColorStr='#19000000')"; /* IE8 */
    -moz-user-select: none;
    -webkit-user-select:none;
    -khtml-user-select: none;
    user-select: none;
    margin-bottom:10px;
}
.button.full, .button.full span {
    display: block;
}
.button:hover, .button.hover {
    background: -moz-linear-gradient(
        center top,
        rgba(255, 255, 255, .2) 0%,
        rgba(255, 255, 255, .1) 100%
    );/* FF3.6 */
    background: -webkit-gradient(
        linear,
        center bottom,
        center top,
        from(rgba(255, 255, 255, .1)),
        to(rgba(255, 255, 255, .2))
    );/* Saf4+, Chrome */
    filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF'); /* IE6,IE7 */
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#33FFFFFF', EndColorStr='#19FFFFFF')"; /* IE8 */
}
.button:active, .button.active {
    top:1px;
}
.button span {
    position: relative;
    color:#fff;
    text-shadow:0 1px 1px rgba(0, 0, 0, 0.25);
    border-top: rgba(255, 255, 255, .2) 1px solid;
    padding:0.8em 1.9em;
    line-height:1em;
    text-decoration:none;
    text-align:center;
    white-space: nowrap;
}



.button.large span {
    font-size:22px;
}
.button.blue {
    background-color:  #3a80e2;
    width:229px;
    height:58px;
}

这是我展示它的方式:

<div class="Wrapper">
 <a class="button large blue" href="#"><span>Sample Button</span></a>
<div>

这是在调整大小之前:

这是在调整大小时:

这是一个 js fiddle demo

Answer 1

您的 .button 类中有这些行:

position:absolute;
top:443px;
left:1030px;

根据您的需要更改它们。例如:

position:relative;
margin:40px auto;

希望对你有帮助

更新:这是您想要的吗？ http://jsfiddle.net/kGs6f/3/show/