中心图像，但不要使整行成为链接

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

是。如果您正在使用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;
}

Answer 2

如果您想在不向标题添加样式的情况下控制图像，只需将固定宽度添加到a并将其设为display:block（因为您知道图像的宽度），然后只需使用的余量：自动：

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>