为什么我的图像与我的其他图像HTML不对齐

Question

当我尝试将鼠标悬停在现有的图片标记上时，我正试图在我现有的图像上显示另一个图像。但是，当我尝试将鼠标悬停在现有图像上时，第二张图像似乎没有在第一张图像上对齐。它看起来像这样：

如何在第一张图像上对齐第二张图像？这是我目前的代码：

<td style="vertical-align:middle;">
  <a href="#" class="gallerypic" style="border-color:Black;border:0;">
    <span class="hoverclose">
      <img src="images/SampleLogo.jpg" width="150" height="150" />
    <span>
    <img id="imageID" src="" width="150" height="150" border="1" style="border-color:Black;"/>
  </a>
</td>

CSS：

<style type="text/css">
        a.gallerypic{
          width:140px;
          text-decoration:none;
          position:relative;
          display:block;
          border:1px solid #040404;
          padding:3px;
          margin-right:5px;
          float:left;
        }

        a.gallerypic span.hoverclose{
          visibility:hidden;
          position:absolute;
          left:40%;
          top:35%;
          filter:alpha(opacity=50);
          -moz-opacity:0.5;
          -khtml-opacity: 0.5;
          opacity: 0.5;
        }

        a.gallerypic:hover span.hoverclose{
          visibility:visible;
        }
    </style>

提前感谢您的帮助！

Answer 1

使用此课程

        a.gallerypic span.hoverclose{
          visibility:hidden;
          position: absolute;
          left: 0px;
          top: 0px;
          filter:alpha(opacity=50);
          -moz-opacity:0.5;
          -khtml-opacity: 0.5;
          opacity: 0.5;
        }

这是Demo Working Fiddle

Answer 2

您将图片定位在left: 40%; top: 35%;，将两个值都更改为0

DEMO

a.gallerypic span.hoverclose{
      visibility:hidden;
      position:absolute;
      left:0;
      top:0;
      filter:alpha(opacity=50);
      -moz-opacity:0.5;
      -khtml-opacity: 0.5;
      opacity: 0.5;
    }

Answer 3

span完全根据父<a>标记定位。由于<a>有填充和边框，因此您需要设置span到4px的顶部和左侧值，而不是您在那里的百分比值。

或者，您可以将它们设置为0并使用边距。

a.gallerypic span.hoverclose {
  visibility:hidden;
  position:absolute;
  left:4px; /* 3px padding + 1px border */
  top:4px;
  filter:alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;
}

<强> Demo