没有 link 且宽度为 100% 的中心图像

Question

我想使我的徽标居中，但其上的 hyperlink 将自身扩展到 100% 宽度，这非常合理，因为我将边距设置为自动。

但是我怎样才能让我的徽标居中并且 link 只出现在我的图像区域？

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

<a href="#"><img class="logo" src="logo.png"></a>

Answer 1

也许你在图像上放置了你想要大小的图层。然后将 link 附加到这一层。

Answer 2

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

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

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

没有 link 且宽度为 100% 的中心图像

Center image without link with width 100%

html

css

center

margin

hyperlink