Изображение со ссылкой, ссылка больше, чем ожидалось. Можно ли сделать ([a class = "name"]) для ссылок?

Question

РЕДАКТИРОВАТЬ: Спасибо всем, кто пытался помочь мне

JSFIDDLE https://jsfiddle.net/m3Lju7fk/

Мой Код прост. пожалуйста, помогите, ссылка, которую я поместил на изображение, больше, чем фактическое изображение. Можно ли создать класс для ссылок?

HTML <a href="url"><img src="/ds2.png" class="d2"/></a>

CSS

a:link {
  color: #0095F6;
}

a:hover {
  color: #0095F6;
}

a:visited {
  color: #0095F6;
}

a:active {
  color: #0095F6;a:hover {
  color: #0056b3;
  text-decoration: underline;
}

a:hover {
  color: #0056b3;
  text-decoration: underline;
}


a {
  color: #007bff;
  text-decoration: none;
  background-color: transparent;
}

Не спрашивайте, почему у меня есть две ссылки при наведении курсора, и моя программа заставляет меня их иметь. Если это проблема, пожалуйста, сообщите мне ниже

Answer 1

Чтобы выровнять <a> по центру, вам нужно назначить text-align:center для любого контейнера, в котором он находится. В этом примере (из вашей скрипки) это будет body.

И у вас есть margin-top: 80xp на изображении, но это также приводит к тому, что область над изображением становится кликабельной. Если вы не хотите этого, переместите margin-top в <a>. Таким образом, кликабельно может быть только само изображение.

body {
  text-align: center;
}

.f1 {
  display: inline-block;
  margin-top: 80px;
}

.d2 {
  width: 50px;
}

img {
  vertical-align: middle;
  border-style: none;
}

<a href="url" class="f1"><img src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" class="d2" /></a>

Answer 2

Будет намного проще использовать flex, если вы тоже хотите выровнять по вертикали.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;

}

div {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 80vh;
  /* adjust height as per your convenience */
}

.f1 {
  display: flex;
  justify-content: center;
  align-items: center;
}

<div><a href="url" class="f1">
<img src="https://images.unsplash.com/photo-1534067783941-51c9c23ecefd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=800&q=60" class="d2"/>
</a></div>