Почему пробел слева и справа от центрированного изображения с гиперссылкой кликабелен? - PullRequest
Новая
       0

Почему пробел слева и справа от центрированного изображения с гиперссылкой кликабелен?

0 голосов
/ 01 декабря 2018

Fiddle с кодом: https://jsfiddle.net/gk95e47p/

Html: 

<html>
  <body>
  <p>text<br>more text</p>
  <a href="www.stackoverflow.com">
    <img src="https://images.pexels.com/photos/1632846/pexels-photo-1632846.jpeg">
  </a>
  <p>even more text<br>still more text</p>
  </body>
</html>

CSS: 

img {
  width: 100px;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Когда загружен вышеуказанный «код», пробел вокругизображение кликабельно (наведите курсор мыши).То есть область между левым / правым полями изображения является частью ссылки, которую изображение инкапсулирует.

Как сделать этот пробел недоступным для щелчка мышью?

Возможности:

  • существует ли другой способ центрировать изображение?
  • есть другой способ сделать изображение ссылкой?

Ответы [ 3 ]

0 голосов
/ 01 декабря 2018

Поскольку тэг a является фактической «кликабельной» вещью в вашем HTML, поэтому, когда вы добавляете поля в него, вы просто увеличиваете контейнер a, поэтому вы должны просто поместить поля в a tag.

Как: 

a {
  margin-left: auto;
  margin-right: auto;
}

image
 {
  width: 100px;
  display: block;
}

Кстати, рассмотрите возможность использования классов CSS

0 голосов
/ 01 декабря 2018

«пробел» активируется, потому что вы сделали элемент img элементом уровня блока.

За MDN :

Элемент уровня блока всегда начинается с новой строки и занимает всю доступную ширину (растягивается влево и вправонасколько это возможно).

Это приводит к тому, что якорь оборачивает изображение плюс левое и правое поля.

Для предотвращения растяжения img до полной ширины (и связав элемент привязки), вы можете применить стили ширины к элементу привязки или предоставить изображению свой собственный контейнер и центрировать содержимое.Вы можете сделать это с помощью text-align: center; или justify-content: center; при изменении значения дисплея контейнеров на flex (display: flex;).

Поскольку разметка становится более сложной или автоматизированной (например, CMS), вы, вероятно, будете иметьиспользовать контейнерный раствор.

Якорный раствор 

.center-img-link {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.center-img-link--100 {
  width: 100px;
}

.center-img-link img {
  width: 100%;
}
<p>text<br>more text</p>
<a href="www.stackoverflow.com" class="center-img-link center-img-link--100">
  <img src="https://images.pexels.com/photos/1632846/pexels-photo-1632846.jpeg">
</a>
<p>even more text<br>still more text</p>

Решение для выравнивания текста 

img {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.text-center {
  text-align: center;
}
<p>text<br>more text</p>
<div class="text-center">
  <a href="www.stackoverflow.com">
    <img src="https://images.pexels.com/photos/1632846/pexels-photo-1632846.jpeg">
  </a>
</div>
<p>even more text<br>still more text</p>

Решение Flexbox 

img {
  width: 100px;
  margin-left: auto;
  margin-right: auto;
}

.flex-h-center {
  display: flex;
  justify-content: center;
}
<p>text<br>more text</p>
<div class="text-center">
  <a href="www.stackoverflow.com">
    <img src="https://images.pexels.com/photos/1632846/pexels-photo-1632846.jpeg">
  </a>
</div>
<p>even more text<br>still more text</p>
0 голосов
/ 01 декабря 2018

Это все, что связано с display: block;, и вот это обновление, я просто использую div для полной ширины и text-align: center;, чтобы сделать его по центру 

img {
  width: 100px;
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
}

div{
  width: 100%;
  text-align: center;
}

<html>
  <body>
  <p>text<br>more text</p>
  <div>
    <a href="www.stackoverflow.com">
      <img src="https://images.pexels.com/photos/1632846/pexels-photo-1632846.jpeg">
    </a>
  </div>

  <p>even more text<br>still more text</p>
  </body>
</html>

Поскольку блок дисплеяэто делает его полной шириной автоматически как <h1>, или добавьте display: inline-block;, поэтому вам нужно использовать его на div, если вы не хотите напрямую на изображении

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...