中心图像没有宽度100％的链接

Question

我想将我的徽标居中，但它上面的超链接扩展到宽度100％，这完全有道理，因为我设置了自动边距。

但是，我怎么能让我的Logo居中并且仅在我的图像区域上有链接？

@PostConstruct

    .logo {
      height: 50px;
      display: inline-block;
      vertical-align:middle;
      padding: 0px 10px;
    }

    @media (max-width: 600px) {
      #nav ul.desktop-nav li {
        display: none;
      }
      .logo {
        display: block;
        margin: auto;
      }
    }

Answer 1

如果我正确理解了这个问题，那么这样的事情应该可以解决问题： 让徽标和徽标包装都是内联块（它们将包装内容，您不希望它们显示：块）。由于它们是内联块元素，因此可以通过围绕它们的主包装器的text-align属性进行居中对齐。调整浏览器大小以查看断点是否生效。

＆＃13;

＆＃13;

.wrapper {
  text-align: center;
}

.logo-wrapper {
  display: inline-block;
}

.logo {
  height: 50px;
  display: inline-block;
  vertical-align: middle;
  padding: 0px 10px;
}

@media (min-width: 600px) {
 .wrapper {
   text-align: left;
 }
}

＆＃13;

<div class="wrapper">
  <a class="logo-wrapper" href="#">
    <img class="logo" src="https://i.vimeocdn.com/portrait/58832_300x300">
  </a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

也许你在图像上放置你想要大小的图层。然后将链接附加到此图层。