html - 没有链接的中心图像，宽度为 100%

Question

我想让我的 Logo 居中，但它上面的超链接将自身扩展到 100% 的宽度，这非常合理，因为我将边距设置为自动。

但是我怎样才能让我的 Logo 居中并且只在我的图片区域有链接呢？

    .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

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

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