<ul class="featured-products">
<li class="flipper">
<div class="front">
<a  href=""><img src="" alt="" />
</a>
</div>

/* FLIPPER LIST ELEMENT*/
#featured-products ul.featured-products li {
    margin-bottom: 40px;
}
#featured-products ul.featured-products li {
    float: left;
    height: 202px;
    list-style: none outside none;
    margin-right: 36px;
    position: relative;
    width: 193px;
}

/*DIV CONTAINING THE IMAGE TO BE CENTERED*/
#featured-products ul.featured-products li.flipper .front {
    background: none repeat scroll 0 0 #FFFFFF;
    border-radius: 4px;
    box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.3);
    display: table-cell;
    height: 170px;
    margin: 2px;
    overflow: hidden;
    padding: 10px;
    transition: all 0.4s ease-in-out 0s;
    vertical-align: middle;
    z-index: 900;
}