Centered boxes with css - wrong aligment

Question

I have a problem with creating centered boxes with css. For now I have this: http://jsfiddle.net/LW7mN/2/

.trex-clear-all{
    display: inline-block;
    width: 99%;
    height: 17px;
    font-size: 12px !important;
    text-align: -webkit-right !important;
    text-align: right;
}
#trex_showonhover{
    visibility:hidden;
    background-color:#FFFFFF;
    border:1px solid #999999;
    cursor:default;
    position:absolute;
    text-align:center;
    width: 280px;
    z-index:100;
    -moz-border-radius: 15px;
    border-radius: 15px;
    padding: 10px 10px 10px;
}
#trex_close_div{
    top:6px;
    right:6px;
    position:absolute;
}    
.trex_showdiv{
    width:310px;
    float: right;
}

.trex-text-title{
    font-family: 'Segoe UI_', 'Open Sans', Verdana, Arial, Helvetica, sans-serif !important;
    font-size: 11px !important;
    font-weight:700 !important;
    padding: 2px !important;
}


.trex-new-widget-container {
    font: 10pt normal Arial, sans-serif;
    height: auto;
    margin: 10px auto 0 auto;
    text-align: center;
    width: 100%;
}


.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    cursor: pointer;
    height: 180px;
    width: 240px;
    float: left;
    margin: 3px;
    position: relative;
    overflow: hidden;
    -webkit-box-shadow: 2px 1px 1px 1px #ccc;
    -moz-box-shadow: 2px 1px 1px 1px #ccc;
    box-shadow: 2px 1px 1px 1px #ccc;
}


.trex-new-widget-container .trex-box img {
    position: absolute;
    left: 0;
    width:100%;
    height: 100%;
    -webkit-transition: all 300ms ease-out;
    -moz-transition: all 300ms ease-out;
    -o-transition: all 300ms ease-out;
    -ms-transition: all 300ms ease-out; 
    transition: all 300ms ease-out;
}


.trex-new-widget-container .trex-box .trex-caption {
    background-color: rgba(240,240,240,0.6);
    position: absolute;
    color: #000 !important;
    z-index: 1000;
    -webkit-transition: all 400ms ease-out;
    -moz-transition: all 400ms ease-out;
    -o-transition: all 400ms ease-out;
    -ms-transition: all 400ms ease-out; 
    transition: all 400ms ease-in;
    left: 0;
}




.trex-new-widget-container .trex-box .trex-full-caption {
    width: 240px;
    height: 50px;   
    top: 130px;
    text-align: center;
    padding-top: 0px;
}


.trex-new-widget-container .trex-box:hover .trex-full-caption {
    -moz-transform: translateY(-60px);
    -o-transform: translateY(-60px);
    -webkit-transform: translateY(-60px);
    transform: translateY(-60px);
    opacity: 1;
    background-color: rgba(0,0,0,0.9);
    color: #fff !important;
}

As you can see, when you change page width (resize browser, or change resolution) number of boxes per row are changing. That's ok, but the boxes shoud be aligned in the middle, not on the left as it is now.

I hope you understand what is the problem. Here is simple sketch so you can visualize it.

Thanks

Answer 1

.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    box-shadow: 2px 1px 1px 1px #ccc;
    cursor: pointer;
    display: inline-block;
    /*float: left;*/
    height: 180px;
    margin: 3px;
    overflow: hidden;
    position: relative;
    width: 240px;
}

Answer 2

Use display instead float :

.trex-new-widget-container .trex-box {
    border: 1px solid #000;
    box-shadow: 2px 1px 1px 1px #ccc;
    cursor: pointer;
    display: inline-block;
    height: 180px;
    margin: 3px;
    overflow: hidden;
    position: relative;
    width: 240px;
}