Css 中心图像，但不'；不要把整条线都连接起来

我有一个徽标，可以链接到我的主页
我想将其居中，这样只有图像本身会被链接，而徽标侧面的空白不会被链接。
我知道我可以使用

display:block

或

display:table

但它使整行成为链接。
是否可以将图元居中，但保持其原始大小

以下是相关代码：

<header class="site-header" id="site-header" role="banner">
        <a href="https://smartbyte.blog">
            <img class="header-image" src="image.png" height="270" width="600" />
        </a>

---

相关类别为

标题图像

是。如果您使用的是

img

元素，只需使用

a

元素将其包装起来，该元素本身放在另一个元素中（例如a

div

）

---

对。如果您使用的是

img

元素，只需使用

a

元素将其包装起来，该元素本身放在另一个元素中（例如a

div

）

---

如果您想在不向标题添加样式的情况下控制图像，只需将固定宽度添加到

a

并使其

显示：block

（因为您知道图像的宽度），然后只需使用边距：auto：

a{
显示：块；
最大宽度：400px；
宽度：100%；
保证金：自动；
边框：1px纯红色；/*仅显示图像宽度*/
}
img{
垂直对齐：顶部；/*以删除空白*/
最大宽度：100%；
}

---

如果您想在不向标题添加样式的情况下控制图像，只需将固定宽度添加到

a

并使其显示为

block

（因为您知道图像的宽度），然后只需使用边距：auto：

a{
显示：块；
最大宽度：400px；
宽度：100%；
保证金：自动；
边框：1px纯红色；/*仅显示图像宽度*/
}
img{
垂直对齐：顶部；/*以删除空白*/
最大宽度：100%；
}

您的徽标是“img”元素还是带有背景的块？请发布代码。现在你的问题看起来像我有一个苹果。我知道我可以用洗碗机清洗我的苹果，但我不想打开它。我怎么能吃我的苹果，虽然它是红色的，但它仍然是绿色的？@smnbbv只吃苹果公仔。你的标志是“img”元素还是有背景的块？请发布代码。现在你的问题看起来像我有一个苹果。我知道我可以用洗碗机清洗我的苹果，但我不想打开它。我怎么能吃我的苹果，虽然它是红色的，但它仍然是绿色的？@smnbbv只吃苹果都德。目前该类应用于img元素，你是说这不可能，我应该将其应用于父元素？是的。您必须始终在某个点设置一些

img

父项的样式，只要它包含在另一个

a

中（在您的情况下，这是必要的，因为您希望您的

img

表现为链接），并且您不希望整行都可以单击。当前应用于img元素的类，你是说这种方式不可能，我应该把它应用到父元素？是的。您将始终需要在某个点设置一些

img

父项的样式，只要它包含在另一个

a

中（在您的情况下，这是必要的，因为您希望您的

img

表现为链接），并且您不希望整行都可以单击。感谢您的回复，图像宽度不是静态的，而是根据浏览器的大小而变化的，但是我想我仍然可以在<代码> A/<代码>标签上应用特定的类，对吗？@ Sigelou-Yes，然后你可以考虑我的第二个解决方案，在这里你不需要宽度；SigiLoWi还更新了我的代码以使它对浏览器ResiZeTAKE您作出响应，图像宽度不是静态的，并且根据浏览器的大小而变化，但我想我仍然可以在<代码> A/<代码>标签上应用特定的类，对吗？@ Sigelou-Yes，然后您可以考虑我的第二个解决方案，在这里您不需要宽度；SagiLow我还更新了我的代码，使其在调整浏览器大小时具有响应性

<div class="link-container">
  <a href="homepage.com">
    <img alt="My website" src="image.png">
  </a>
</div>

.link-container {
  text-align: center;
}