HTML + CSS - 使用超鏈接對圖像進行定位

-1

所以我有兩個帶有超鏈接的圖像，當我嘗試將它們居中時，它們的行爲很有趣，所以我認爲它可能是元素的尺寸被扭曲了？不知何故？所以我添加邊框的元素四周，果然，他們的尺寸是這樣的：HTML + CSS - 使用超鏈接對圖像進行定位

https://gyazo.com/f5a91e1a26eaf3aea6208ffa2eea698c

HTML：

<a id="home-invite-button" href="https://url.com" target="_blank"><img 
src="Images/Invite Button.png"></a> 
<a id="home-wiki-button" href="https://url.com" target="_blank"><img 
src="Images/Wiki Button.png"></a>

CSS：

#home-invite-button { 
    position: absolute; 
    top: 540px; 
    left: 0px; 
    right: 0px; 
    margin: 0px auto; 
    width: 50%; 
    border: thin black solid; 
} 

#home-wiki-button { 
    position: absolute; 
    top: 630px; 
    left: 0px; 
    right: 0px; 
    margin: 0px auto; 
    width: 50%; 
    border: thin black solid; 
}

所以問題是，我怎樣才能使元素的實際大小與實際圖像相同？非常感謝！

來源

2017-10-21 APixel Visuals

避免分配寬度您的圖像，而不是換一個div content-holder內<a>標籤，然後應用定位持有人。圖像將保持不變。

看一看下面的代碼片段：

.content-holder { 
 
    position: absolute; 
 
    top: 50%; 
 
    left: 50%; 
 
    transform: translate(-50%, -50%); 
 
    border: thin black solid; 
 
} 
 

 
#home-invite-button { 
 
    display: flex; 
 
    border: 1px solid red; 
 
} 
 

 
#home-wiki-button { 
 
    display: flex; 
 
    border: 1px solid red; 
 
}

<div class="content-holder"> 
 
    <a id="home-invite-button" href="https://url.com" target="_blank"><img 
 
    src="http://placehold.it/100x100"></a> 
 
    <a id="home-wiki-button" href="https://url.com" target="_blank"><img 
 
    src="http://placehold.it/100x100"></a> 
 
</div>

希望這是你想達到什麼目的。

來源

2017-10-21 05:08:01

非常感謝，這工作！我還了解到寬度的東西實際上並不是要走的路。總的來說，很棒的回答:) –

這是我的榮幸。如果你覺得這個答案有用，也請注意它。 –

hehe是啊我需要15代表第一：P –

你可以試試這個代碼

a img { 
    display: block; 
    margin: 0 auto; 

}

如果您還看到此鏈接：JSfiddle

來源

2017-10-21 05:04:39

我剛纔試過這個，它沒有解決這個問題。 –

當你的鏈接居中，然後確保你的鏈接包裝的例子：https：//jsfiddle.net/sayed021/tpnoztx6/1/ –

HTML + CSS - 使用超鏈接對圖像進行定位

回答

相關問題