Search code examples
htmlcssstylesheet

css div centering

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/

Solution

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