Question

我有一个包围图像的锚元素，提供常用的链接功能以及点击功能的扩展。如果启用了Javascript，则锚元素应该占据整个屏幕的白色背景，并且图像应该在点击时位于中心。目前，图像位于屏幕的左上角。我在“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/

Answer 2

请尝试以下代码，此处为example

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>

CSS部分

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

Answer 3

使用jquery将它居中，有很多插件可以实现它。像这样：http://archive.plugins.jquery.com/project/autocenter

Answer 4

这里是CSS solution。

只需将margin-left和margin-right设置为auto：

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

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

Answer 5

对我而言，它的效果如下：

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

尝试所有主流浏览器：moz，chrome，ie8，safari

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

5 个答案: