css div центрирование - PullRequest
Новая
       10

css div центрирование

2 голосов
/ 09 ноября 2009

Я пытаюсь центрировать кнопку div, и она не работает

вот ксс 

    .game-actions{
margin-left:auto;
margin-right:auto;
}

.game-actions a.up {
    display: block;
    text-decoration: none;
    font-weight: bold;
    padding:12px 32px;
    float: left;
    border: 1px solid #c1d9f6;
    -moz-border-radius: 7px;
    -webkit-border-radius: 7px; 
}

.game-actions a:hover {
    border-color: #80b0ea;
    background:#e1ecf3;
}

вот HTML 

<div class="game-actions"> 
<a class="up" id="a1" href="#" onClick="toggle(this.value)">Tweet it</a>
</div>

Сайт находится по адресу - http://gibberize.com/

Ответы [ 3 ]

5 голосов
/ 09 ноября 2009

По умолчанию теги div расширяют свою ширину на всю ширину родительского контейнера. Таким образом, установка их полей на auto ничего не делает, так как просто автоматически устанавливает оба поля на 0. Если вы установите фиксированную ширину для div, он будет центрироваться.

3 голосов
/ 09 ноября 2009

По умолчанию div элементы - это полная ширина страницы, и поскольку вы не указываете, какова должна быть ширина, автоматическое поле будет равно 0 с обеих сторон.

В этом случае я бы использовал text-align: center; на div для центрирования ссылки.

1 голос
/ 09 ноября 2009

Вот одно решение для вас. К вашим первым .game-действиям классу CSS добавьте: 

width:1px;

Кроме того, измените заголовок Tweet it на: 

Tweet&nbsp;it

(чтобы не сломать кнопку над 2 строками)

...