Question

[更新：使用位置＆＃34;固定＆＃34;工程！]

目标：当光标悬停在不同图像上时，目标需要使图像出现在浏览器窗口的中心。

现状：当cusrsor在不同图像上方悬停时，当前状态（下面的参考代码）展示成功地使图像出现。但是，涉及操纵CSS的多次尝试都无法使图像始终显示在浏览器窗口的中心。图像确实出现了。外观的位置;但是，并不总是出现在浏览器窗口的中心。

请注意CSS＆＃34; relative＆＃34;功能已被使用，但结果涉及图像出现在不同位置，具体取决于光标悬停发生在哪个图像上。想法 - 目标 - 是让出现的图像始终出现在浏览器窗口的中心，而不管光标悬停在表格中的哪个图像。

这里是相关的CSS和XHTML：

＆＃13;

   <table class="pic_matrix">
      <tr>
	     <td class="pics">Title 1</td>
	     <td class="pics"><a class="appear" href=""><img src="001_small.jpg" width="80" height="100" alt="" /><span><img src="001_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="002_small.jpg" width="80" height="100" alt="" /><span><img src="002_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="003_small.jpg" width="80" height="100" alt="" /><span><img src="003_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="004_small.jpg" width="80" height="100" alt="" /><span><img src="004_big.jpg" width="544" height="306" /></span></a></td>
      </tr>
      <tr>
	     <td class="pics">Title 2</td>
	     <td class="pics"><a class="appear" href=""><img src="005_small.jpg" width="80" height="100" alt="" /><span><img src="005_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="006_small.jpg" width="80" height="100" alt="" /><span><img src="006_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="007_small.jpg" width="80" height="100" alt="" /><span><img src="007_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="008_small.jpg" width="80" height="100" alt="" /><span><img src="008_big.jpg" width="544" height="306" /></span></a></td>
      </tr>
      <tr>
	     <td class="pics">Title 3</td>
	     <td class="pics"><a class="appear" href=""><img src="009_small.jpg" width="80" height="100" alt="" /><span><img src="009_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="010_small.jpg" width="80" height="100" alt="" /><span><img src="010_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="011_small.jpg" width="80" height="100" alt="" /><span><img src="011_big.jpg" width="544" height="306" /></span></a></td>
	     <td class="pics"><a class="appear" href=""><img src="012_small.jpg" width="80" height="100" alt="" /><span><img src="012_big.jpg" width="544" height="306" /></span></a></td>
      </tr>
   </table>

＆＃13;

Answer 1

如果我正确理解了您的问题，那么您只需将css类属性修改为

即可

GridView.Rows[index](columnIndex)

如您所见，顶部和左侧属性设置为50％，margin-top和margin-left值分别设置为图像高度的一半为负值，负值为图像宽度的一半。 .. margin-top = - （height_of_image / 2）， margin-left = - （width_of_image / 2）

Answer 2

使用＆＃34; position：fixed;＆＃34;的组合，通过纯CSS完成所需的效果。在原帖[更新]中提到的概念，以及＆＃34; user3687099＆＃34;建议的负边际概念。

感谢您的建议！

当光标悬停在不同图像上时，如何使图像显示在浏览器窗口的中心

2 个答案: