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

Posted 2023-03-29

【中文标题】没有链接的中心图像，宽度为 100%

【英文标题】：Center image without link with width 100%

【发布时间】：2018-05-03 00:20:40

【问题描述】：

我想将我的徽标居中，但其上的超链接将自身扩展到 100% 宽度，这非常有意义，因为我将边距设置为自动。

但是我怎样才能让我的徽标居中并且只在我的图像区域有链接？

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

   

【问题讨论】：

所以您希望锚点只能在图像所在的位置可点击...并且您希望图像在大屏幕上左对齐并在小屏幕上居中对齐，我说对了吗？

【参考方案1】：

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

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

【参考方案2】：

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

【讨论】：

像Divs这样的层还是什么意思？