圍繞在HTML頁面圖像的鏈接

我試圖居中鏈接內的圖像：圍繞在HTML頁面圖像的鏈接

<a href="URL"> 
    <img class="my_class" src="SRC" /> 
</a>

CSS的樣子：

.my_class 
{ 
    position:relative; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

我的問題是，該鏈接可按特定高度的整個頁面寬度，而不僅僅是在我的圖像上。另外，我的應用程序需要與兩個方向的工作：dir:"rtl"和dir:"ltr"

2013-08-30 crazybob

您能向我們展示一個您正在處理的事例嗎？你的CSS感覺不完整，錨的造型在哪裏？ – rgin

你是什麼意思的圖像在鏈接的中心？您尚未將鏈接分配給任何維度。默認情況下圖像將佔用整個鏈接空間 – MarsOne

下面的示例（DEMO）顯示了我的問題：圖像上的鏈接可以從圖像的兩側按下。 – crazybob

你的意思是像this?

只要把width和height財產。

width: 200px; height: 150px; /*Example*/

2013-08-30 08:47:05

我寧願把它包在一個容器中，像這樣：

<div class="my_class"><a href="#"><img src="src.png" /></a></div>

爲my_class的CSS將保持不變。

2013-08-30 07:45:10 Technaton

像這樣

HTML

<a href="URL" class="my_class"> 
    <img src="SRC" /> 
</a>

CSS

a { 
    text-align:center; 
} 
.my_class { 
    position:relative; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

CSS

iframe, body{ 
    margin:0; 
    padding:0; 
    text-align:center; 
}

2013-08-30 07:50:08 falguni

（+1）我刪除了我的答案，因爲這樣好多了。 – FakeRainBrigand

@FakeRainBrigand非常感謝 – falguni

問題是（請參閱您的示例），您可以按下圖像左側/右側的鏈接 – crazybob

a { 
    text-align: center; 
}

，並刪除此：的位置是：相對的; display：block; margin-left：auto; margin-right：auto;

2013-08-30 07:50:25 Vladimir

我想很多的填充左右將解決你的問題

像

a{ 
width:1000px; 
background:red; 
padding:10px 250px 10px 250px; 
}

2013-08-30 07:57:17

回答