Javascript 如何在锚元素中动态居中图像？

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

<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>

---

对不起，我想你们很多人误解了我的问题。它是在单击之后而不是之前将图像居中。

使用jquery将其居中，有很多插件可以做到这一点。像这个：

这里是

只需将左边距和右边距设置为

auto

：

margin-left: auto;
margin-right: auto;

img.displayed {
   display: block;
   margin-left: auto;
   margin-right: auto
}
...
<img class="displayed" src="..." alt="...">

左边距：自动；
右边距：自动；
显示图像{
显示：块；
左边距：自动；
右边距：自动
}
...

是的，您可以使用css来实现这一点。像这样：

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

检查这个

已更新

---

检查此项

尝试以下代码，此处为

HTML部分

 <div>
  <a href='http://akajake.com/web/images/rss-feed-icon.gif' onClick="javascript: console.log($(this).toggleClass('centered')); return false;">
     <img src='http://akajake.com/web/images/rss-feed-icon.gif'/>
  </a>
</div>

---

对我来说，它工作得很好，如下所示：

a img{
  vertical-align: middle;
  border: 0;
}

---

在所有主流浏览器上都试用过：moz、chrome、ie8、safari

没有插件可以吗？我正在寻找一个CSS解决方案。无论如何，jQuery的好处是对常见javascript用法的一般跨浏览器抽象。如果没有仅使用CSS的插件，这是无法实现的。你必须使用表格，这很糟糕。垂直尺寸如何？我想在单击时将图像居中，而不是在单击之前。你的标记高度是否固定？单击前标记高度自动，单击后100%显示浏览器窗口。错误。。我的目的是有一个缩略图，点击后，扩展到它的实际尺寸，并将其自身定位在网页的中心，用锚元素的白色背景覆盖网页本身。类似于打开链接，但图像位于中间。嘿，sandeep，谢谢你的帮助。很抱歉，它与我最初的实现有很大不同。我需要的位置固定，因为缩略图是一个以上的屏幕高度低于页面顶部。这个点击应该像一个弹出窗口，除了它是在同一个窗口。

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

a img{
  vertical-align: middle;
  border: 0;
}