如何在錨點元素內動態調整圖片的中心位置？

我有一個錨點元素環繞圖像，提供常用的鏈接功能以及點擊功能的擴展。如果啓用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; }

對不起，我想很多人都誤解了我的問題。它在點擊之後將圖像居中，而不是之前。

來源

2012-03-15 Question Overflow

使用jquery來集中它，有很多插件可以實現它。像這樣：http://archive.plugins.jquery.com/project/autocenter

來源

2012-03-15 13:42:20 thiagofm

能不能做到沒有插件？我正在尋找一個CSS解決方案。 – 2012-03-15 13:44:20

無論如何，jQuery的好處是常見的JavaScript用法的一般跨瀏覽器抽象。 – antonjs 2012-03-15 13:49:32

只有css才能完成插件。你將不得不使用表，這是可怕的。 – thiagofm 2012-03-15 18:16:12

這裏的CSS solution。

只需通過設置利潤率左緣和右到auto：

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

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

來源

2012-03-15 13:43:50 antonjs

垂直尺寸如何？ – 2012-03-15 13:46:49

對不起，我的意思是說，在點擊圖像後居中，而不是在... – 2012-03-15 13:56:58

是的，你可以用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/

來源

2012-03-15 13:46:08 sandeep

我想在點擊時將圖像居中，而不是在此之前。 – 2012-03-15 13:49:42

是你的標籤高度是否固定？ – sandeep 2012-03-15 13:55:38

標籤高度在點擊之前是自動的，點擊時是100％的瀏覽器窗口。 – 2012-03-15 13:59:25

嘗試下面的代碼，這裏的 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; 
}

來源

2012-03-15 16:08:47 antonjs

對我來說它的工作不錯，如下所示：

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

試圖在所有主要的瀏覽器：MOZ，鉻，IE8，Safari瀏覽器

來源

2013-10-05 06:40:19 enger

如何在錨點元素內動態調整圖片的中心位置？

回答

相關問題