如何控制图像的可点击区域？ CSS

Question

即使图像位于页面的中心，我也可以点击图像的整个宽度，这会干扰页面的汉堡包功能。我哪里出错了？

CSS：

.logo img{
  margin-left: 7.8%;
  float:left;
  user-select: none;
  position: relative;
  z-index: 1;
}

@media (max-width: 769px) {
 .logo img{
  float:none;
  display: block;
  margin-left: auto;
  margin-right: auto;
 }
}

Answer 1

.logo img为display:block，它将占用其父容器的整个宽度。我会将其更改为display:inline-block

见这里：（What is the difference between display: inline and display: inline-block?）

Answer 2

您可以使用display-flex轻松对齐项目。 z-index: -1将允许汉堡包捕获事件而不是图像。尝试点击汉堡包占位符div和图像并查看相应的点击工作

/* Styles go here */
header {
  height: 60px;
  background-color: black;
  position: relative;
}

div.img-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60px;
  z-index: -1;
}

.hamburger {
  width: 30px;
  height: 30px;
  background: red;
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;
}

img {
  line-height: 80;
}

<header>
  <div class='hamburger' onClick='alert("hamburger")'></div>
  <div class="img-container"><img src="http://via.placeholder.com/350x50" onClick='alert("image")'></div>
</header>

Answer 3

就像@Napoli说的那样，并且因为我看不到您的HTML代码......您应该使用display:inline-block，然后给它一个保证金，使其像margin: 0 auto;

一样居中