css div centering

Question

I am trying to center a div button and its not working

here is the 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;
}

here is the html

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

Website is at - http://gibberize.com/

Answer 1

By default, div tags expand their width to the entire width of their parent container. Thus setting their margins to auto doesn't do anything since it just auto-sets both margins to 0. If you set a fixed width for the div then it will center.

Answer 2

By default div elements are the full width of the page and since you aren't specifying how wide it should be the auto margin will be 0 on both sides.

In this case I would use a text-align: center; on the div to center the link.

Answer 3

Here's one solution for you. To your first .game-actions CSS class add:

width:1px;

Also, change the caption Tweet it to:

Tweet it

(to avoid breaking the button over 2 lines)