Выровняйте кнопку CSS3 внутри оболочки, используя HTML - PullRequest
Новая
       16

Выровняйте кнопку CSS3 внутри оболочки, используя HTML

0 голосов
/ 08 января 2012

У меня есть простая кнопка 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>

Это до изменения размера:

enter image description here

Это при изменении размера: enter image description here

Здесьэто js fiddle демо

1 Ответ

1 голос
/ 08 января 2012

В вашем классе .button есть следующие строки: 

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

Измените их в соответствии со своими потребностями.Например: 

position:relative;
margin:40px auto;

Надеюсь, это поможет

ОБНОВЛЕНИЕ: Это то, что вы хотите?http://jsfiddle.net/kGs6f/3/show/

...