jquery - 使悬停图像对齐中心

Question

我将以下 css 代码用于我的 html 文件， 悬停时出现的图像位于左上角，如何使其居中？

这是html代码

<a class="thumbnail" href="#thumb">View Sample
  <span>
    <img src="images/1.png" /><br>Simply beautiful.
  </span>
</a>

这是CSS代码

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{

}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{

}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: #F0F0F0 ;
border-radius: 20px;
padding: 0px;


visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 10;

padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

Answer 1

在这里查看我的 jsfiddle:http://jsfiddle.net/93863/7/

我添加的CSS:-

.thumbnail:hover span
{
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -194px;    /* Half of the popups height */
    margin-left: -190px;   /* Half of the popups width */
}