javascript - 如何在 anchor 元素内动态居中图像？

Question

我有一个围绕图像的 anchor 元素，提供了通常的链接功能以及点击功能的扩展。如果启用了 Javascript，则 anchor 元素应该以白色背景占据整个屏幕，并且图像应该位于点击时的中心。当前图像位于屏幕的左上角。我在“Stackoverflow”中尝试过一个类似的例子，但它似乎对我的情况不起作用。下面是我的代码:

<script>
function resize(me) {
 $(me).toggleClass('pop_up');
 $(me).find('img').toggleClass('resize');
}
</script>

<div>
 <a href='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/361px-Flower_poster_2.jpg' onclick='resize(this); return false;'>
  <img src='http://upload.wikimedia.org/wikipedia/commons/thumb/a/a5/Flower_poster_2.jpg/361px-Flower_poster_2.jpg'/>
 </a>
</div>

这是 CSS:

img {
 height: 100px;
 width: 100px;
}

.resize {
 height: auto;
 width: auto;
}

.pop_up {
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 100%;
 background-color: white;
}

抱歉，我想你们中的许多人都误解了我的问题。它在点击之后而不是之前使图像居中。

Answer 1

是的，你可以用 css 做到这一点。像这样:

img {
 height: 100px;
 width: 100px;
 vertical-align:middle;
}
a{
    display:block;
    width:300px;
    border:1px solid red;
    text-align:center;
    line-height:300px;
}

检查这个http://jsfiddle.net/tBCcd/

已更新

检查这个http://jsfiddle.net/tBCcd/1/