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 */
}

Answer 2

更改为top: 50%;

Fiddle

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

Answer 3

.thumbnail:hover span{ 
visibility: visible;
top: 50%;
margin-top:-25%;
left: 230px; 
z-index: 50;
}

包括“top：50％”和“margin-top：-25％”，这将集中定位。

制作悬停的图像以对齐中心

3 个答案: