中心图像，但不要使整条线成为一个链接

Question

我有一个标志，它是我的主页的链接。

我想让它的中心，所以只有图像本身将是链接，而空白的标志边将不会。

我知道我可以使用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>

相关的类是header-image

Answer 1

如果您想控制您的图像而不添加样式到标头，您可以简单地将固定宽度添加到a并使其为display:block (因为您知道图像的宽度)，然后只需使用边距:auto。

​

a {
  display: block;
  max-width: 400px;
  width:100%;
  margin: auto;
  border: 1px solid red; /* To show it only takes width of image */
}

a img {
  vertical-align: top; /* To remove white space */
  max-width:100%;
}

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

​

或者使用display:table，您不需要指定宽度：

​

a {
  display: table;
  margin: auto;
  border:1px solid red; /* To show it only takes width of image */
}
a img {
 vertical-align:top; /* To remove white space*/
 max-width:100%;
}

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

​

Answer 2

是。如果您使用的是img元素，只需将其封装为一个a元素，它本身就放在另一个元素中(例如，一个div)。

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

和CSS代码：

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