Ei @unknown, quando tiver tempo dá uma olhada lá, tô quase conseguindo, deu certo centralizar mas ficou cada produto numa linha, ficou um abaixo do outro!
Obs: Ficou ainda um pequeno desalinhamento de um produto para o outro! (mas é só na página inicial)
OLHA COMO FICOU AQUI O CSS:
Código: Selecionar todos/* box products */
.box-product
{
text-align:center;
width: 30%;
}
.product-grid
{
overflow: visible;
display:block;
}
.product-info .right .box-product
{
white-space:normal;
}
.box-content .box-product, .box-content .product-grid
{
}
.box-product > div, .product-grid > div /* CAIXA DE PRODUTOS */
{
text-align:center;
float:center;
vertical-align: top;
margin-right: 10px;
margin-left: 10px;
margin-bottom: 20px;
border:1px solid rgba(106,179,223, 0.6);
padding-bottom:20px;
}
#tab-related .box-product > div, #tab-related .product-grid > div
{
margin-left:10px;
margin-right:10px;
}
.box-product > div.first, .product-grid > div.first
{
margin-left:0px;
}
.box-product > div.last, .product-grid > div.last
{
margin-right:0px;
}
.box-product > div .cart, .product-grid > div .cart
{
margin-top:10px;
display:none;
}
.product-info > .right
{
float: left;
width: 470px;
}
.box-product > div:hover, .product-grid > div:hover
{
border:1px solid rgba(255,120,0, 0.6);
box-shadow:0 0 20px -8px #FF7800;
-webkit-box-shadow:0 0 20px -4px #FF7800;
}
#column-left + #column-right + #content .box-product > div,
#column-left + #column-right + #content .product-grid > div {
width: 119px;
}
.box-product .image,
.product-grid .image
{
display: block;
margin-bottom:0px;
min-height:244px;
min-width:175px;
padding:20px 20px 0px;
}
.box-product .image img {
}
.box-product .name a,
.product-grid .name a
{
color: #FF7800;
font-weight: normal;
text-decoration: none;
display: block;
margin-bottom: 2px;
text-shadow: 0 0 1px #FFFFFF;
font-size:16px;
font-weight:200;
}
.box-product .name a:hover,
.product-grid .name a:hover
{
color: #0062BC;
}
.box-product .price,
.product-grid .price
{
display: block;
color: #25AE00;
margin-bottom: 0px;
font-size:18px;
font-weight: bold;
}
.box-product .price .price-tax,
.product-grid .price .price-tax
{
color: #989488;
font-size:11px;
}
.box-product .price-old,
.product-grid .price-old
{
color:#6AB3DF;
text-decoration: line-through;
font-size:16px;
font-weight: normal;
margin-right:3px;
}
.box-product .price-new,
.product-grid .price-new
{
font-weight: normal;
}
.box-product .rating,
.product-grid .rating
{
display: block;
margin-bottom: 4px;
}
/* box category */
.box-category {
margin-top: -5px;
}
.box-category ul {
list-style: none;
margin: 0;
padding: 0;
}
.box-category > ul > li {
padding: 8px 8px 8px 0px;
}
.box-category > ul > li + li {
border-top: 1px solid #EEEEEE;
}
.box-category > ul > li > a {
text-decoration: none;
color: #484246;
}
.box-category > ul > li ul {
display: none;
}
.box-category > ul > li a.active {
font-weight: bold;
}
.box-category > ul > li a.active + ul {
display: block;
}
.box-category > ul > li ul > li {
padding: 5px 5px 0px 10px;
}
.box-category > ul > li ul > li > a {
text-decoration: none;
display: block;
}
.box-category > ul > li ul > li > a.active {
font-weight: bold;
}
/* content */
#content .content {
overflow: auto;
margin-bottom: 20px;
margin-top:0px;
}
#content .content .left {
float: left;
width: 49%;
line-height:22px;
margin-bottom: 5px;
}
#content .content .right {
float: right;
width: 49%;
display:none;
}
Abraço!!!
