css div居中

Question

我试图将div按钮居中并且无法正常工作

这是css

    .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/

Answer 1

默认情况下，div标记会将其宽度扩展为其父容器的整个宽度。因此，将它们的边距设置为auto并没有做任何事情，因为它只是将两个边距自动设置为0.如果为div设置固定宽度，那么它将居中。

Answer 2

默认情况下，div元素是页面的整个宽度，因为您没有指定它应该有多宽，所以两边的自动边距都为0。

在这种情况下，我会使用text-align: center;上的div来固定链接。

Answer 3

这是一个适合您的解决方案。对于您的第一个 .game-actions CSS类添加：

width:1px;

另外，将标题推文更改为：

Tweet it

（避免超过2行的按钮）