Search code examples
htmlcentercss

Centering divs inside of a div

I have a div that is 100% wide that contains a number og smaller div's "100x100px".

But I would like them to be centered so that there always is the same amount of space on the left and right side when they are forced to start on a new row. Am I going around this the wrong way?

CSS:

.menuContainer {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    background-color: #7144E0;
}
    .menuItem {
        width: 100px;
        height: 100px;
        margin: 10px;
        background-color: #F3FD4F;
        display: inline-block;
}

HTML:

<div class="menuContainer">
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
    <div class="menuItem"></div>
</div>

http://jsfiddle.net/craigzilla/yofu4md0/

Solution

  • Add text-align:center rule to .menuContainer 

    .menuContainer {
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    margin: 0 auto;
    background-color: #7144E0;
    text-align:center; /* Added this */
}

    Demo