.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:29%;
            margin:0 0 0px 1%; padding:3px 1px;
            height:100%; /* Height of img (75) + 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%;
            }

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

            .gallery a:link,
            .gallery a:visited,
            .gallery a:focus,
            .gallery a:hover,
            .gallery a:active{
              padding:0px;
              background:#eeefef;
          //    width:75px; height:75px;
              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) */
            }
            .gallery a:hover{
              border-color:#dfdfdf;
            }

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