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

Итак, вопрос в том, как я могу сделать фактический размер элементов таким же, как фактическое изображение? Спасибо!

Answer 1

Избегайте назначения ширины для ваших изображений, вместо этого оберните <a> теги внутри div content-holder и затем примените позиционирование к держателю. Изображения останутся нетронутыми.

Посмотрите на фрагмент ниже:

.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

Вы можете попробовать этот код

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

}

Если вы также видите эту ссылку: JSfiddle