I'm having trouble creating centered boxes with CSS. Currently, I have the following code: 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;
}
When you adjust the page width (resize browser, or change resolution), the number of boxes per row changes. This is fine, but I want the boxes to be aligned in the middle, not on the left as they currently are.
I hope this clarifies the issue. Here is a simple sketch for better visualization:
Thank you