.gallery{
  margin:0; padding:0;
  overflow:hidden; /* Clears the floats */
  width:100%; /* IE and older Opera fix for clearing, they need a dimension */
  list-style:none;
}
.gallery li{
float:left;
display:inline; /* For IE so it doesn't double the 1% left margin */
width:28.0%;
margin:10px 0 10px 1%; padding:10px 0;
height:160px; /* Height of img (152) + 2 times 3px padding + 2 times 1px border = 83px */
position:relative; /* This is the key */
/*background:url(45degree.png);*/
}
.gallery a,
.gallery img{
  display:block;
  width:100%;
  border: none !important;
}

a img{ border:none; } /* A small fix */

.gallery a:link,
.gallery a:visited,
.gallery a:focus,
.gallery a:hover,
.gallery a:active{
  padding:3px;
  /*background:#eeefef;*/
  width:200px; height:152px;
  /*border:1px solid #eeefef;*/ /* We blend the border with the bg, as if it isn't there */
  position:absolute; top:50%; left:50%; /* position it so that image's top left corner is in the center of the list item */
  /*margin:-41px 0 0 -41px;*/ /* Pull the image into position with negative margins (margins value is half of the width of the image) */
  margin:-104px 0 0 -80px;
}
.gallery a:hover{
  /*border-color:#dfdfdf;*/
}

/* These are all optional, for decoration purpouses only */
.gallery{
  /*border-bottom:2px solid #000;*/
  padding-bottom:10px;
  padding-top:10px;
  margin-top:10px;
}