如何防止我的圖片鏈接成爲整個頁面的寬度？

這這裏是我的HTML源代碼：如何防止我的圖片鏈接成爲整個頁面的寬度？

<a href="#section-1"> 
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;"> 
</a>

當我嘗試使用這種方式，使自己的形象與196px鏈接到某個地方的寬度，鏈接跨越整個頁面寬度。 我只希望鏈接在圖像上方懸停時可用。

編輯：圖像需要保持水平居中。

來源

2013-12-11 Chris

刪除'顯示：從影像風格block'。 – Nunners

使用文本對齊：中心在，從刪除顯示塊，在添加顯示塊，並可能浮動到錨 – KrishnaDhungana

真的沒有足夠的信息來看看發生了什麼。任何答案都是純粹的猜測，因爲這很大程度上取決於父母和兄弟姐妹元素。你能發佈一個鏈接到你的頁面或jsfiddle嗎？ – Metagrapher

要對齊圖像，並得到你要求：

把類（這樣就可以風格它），刪除圖像的內聯樣式，並指定a的寬度，並通過使用自動的左右邊距（因爲我們指定了寬度），它會將其與中心對齊。

HTML

<a href="#section-1" class="link"> 
    <img src="/images/site-images/scrolldown2.png"> 
</a>

CSS：

.link { 
    display: block; 
    width: 196px; 
    margin: 0 auto; 
}

來源

2013-12-11 11:33:35 jackJoe

謝謝，它以這種方式工作。 – Chris

使用此：

<a href="#section-1" style="margin: 0px auto; display: block; width: 196px"> 
    <img src="/images/site-images/scrolldown2.png" style="display: block;"> 
</a>

或絕對位置：

<a href="#section-1" style="position: absolute; left: 50%; margin-left: -98px; display: block; width: 196px"> 
    <img src="/images/site-images/scrolldown2.png" style="display: block;"> 
</a>

來源

2013-12-11 11:33:02 Hardy

謝謝，這似乎是我想要的方式工作！ – Chris

添加類代碼

<a class="my_link" href="#section-1"> 
    <img src="/images/site-images/scrolldown2.png" style="display: block; margin:auto;"> 
</a>

小提琴http://jsfiddle.net/thiswolf/hMR9a/1/

這使得圖像無法點擊

.my_link{ 
pointer-events: none; 
}

這使得圖像可點擊

.my_link:link{ 
cursor:pointer !important; 
pointer-events: auto; 
}

來源

2013-12-11 11:39:34 Gandalf

如何防止我的圖片鏈接成爲整個頁面的寬度？

回答

相關問題