HTML + CSS - 하이퍼 링크로 이미지 가운데 맞추기

Question

하이퍼 링크가있는 두 개의 이미지가 있으며, 가운데에 놓으려고하면 이미지가 재미있게 작동하므로 요소의 크기가 왜곡 되었습니까? 어쩐지? 그래서 나는 요소 주위에 테두리를 추가 과연, 이들의 크기는 다음과 같습니다 :

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

그래서 질문을 그렇다면 요소의 실제 크기를 실제 이미지와 동일하게 만들려면 어떻게해야합니까? 정말 고마워!

당신은이 링크를 참조하면이 코드

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

} 

을 시도 할 수 있습니다

Answer 1

피가 이미지의 폭을 할당하는 사업부 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>

희망 :

아래의 코드 조각에서보세요.

Answer 2

: 대신, JSfiddle