如何将图像放在被锚固式标签包围的标题中，并制作图像，而不是整个空间链接

Question

我已经启动了一个简单的项目并创建了一个基本标题，标头具有一个背景，该背景使用CSS设置，并使用标题标签内的IMG元素设置了一个徽标。但是，IMG元素被超链接标签包围，以使徽标可单击以重新指导到主页，但是当我使用下面所示的代码时，整个标头变为链接。

如果这是问题的任何原因，我也在使用bootstrap。

https://jsfiddle.net/sovmr6rs/

 <header class="header">
        <a href="https://google.com.au">
          <img class="logo" src="assets/images/logo.png" alt="Server Logo">
        </a>
</header>
.header {
background-image: url("../../images/headerBackground.jpg");
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.logo {
    width: 25%;
    height: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

我感谢任何可以帮助我解决此问题的答复。

谢谢！

Answer 1

从.logo中删除display: block;，然后将text-align: center添加到.header。这是更新的小提琴。

就像：

.header {
  text-align: center;
}
.logo {
  width: 25%;
  height: auto;
  margin: 0 auto;
}

或查看下面的摘要：

.header {
    background-image: url("../../images/headerBackground.jpg");
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    text-align: center;
}
.logo {
    width: 25%;
    height: auto;
    /* display: block; */
    margin: 0 auto;
}

 <header class="header">
            <a href="https://google.com.au">
              <img class="logo" src="assets/images/logo.png" alt="Server Logo">
            </a>
    </header>

希望这会有所帮助！