Question

所以我在链接中得到了这个图像，我设法使图像居中，但问题是整个容器的链接，你可以点击图像的左右两边，这不是我想要的！我只希望图片可以点击。

我坚持这个请求帮助。

＆＃13;

.salo img {
  display: block;
  margin: auto;
}

＆＃13;

<a href="#" class="salo">
  <img src="http://dummyimage.com/200x200/000/fff">
</a>

＆＃13;

Answer 1

就这样做，不需要额外的包装。

＆＃13;

.salo {
  display: block;
  margin: auto;
  width: 200px;
}

＆＃13;

<a href="#" class="salo">
    <img src="http://dummyimage.com/200x200/000/fff">
</a>

＆＃13;

Answer 2

将其包裹在div内。提供.salo img display: inline-block;，然后提供.wrapper text-align: center。 JSFiddle

.wrapper {
  text-align: center;
}

.salo img {
  display: inline-block;
}

<div class="wrapper">
  <a href="#" class="salo">
    <img src="http://dummyimage.com/200x200/000/fff">
  </a>
</div>

Answer 3

有两种方法，容器div为text-align:center

JS Fiddle 1

.container {
  text-align: center;
}
.salo {
  display: inline-block;
}
.salo img {
  display: block;
  margin: auto;
}

<div class="container">
  <a href="#" class="salo">
    <img src="http://dummyimage.com/200x200/000/fff">
  </a>
</div>

或者不需要额外的标记，使用left:50%和transofrm:translateX(-50%)定位它，这样我们就可以通过 {{从左移视口宽度的1}} ，并将其向后移动50%宽度的 50% 。

JS Fiddle 2

a

.salo { position: relative; left: 50%; transform: translateX(-50%); display: inline-block; } .salo img { display: block; margin: auto; }

第三种方法是使用<a href="#" class="salo"> <img src="http://dummyimage.com/200x200/000/fff"> </a>函数，你可以使用这个知道图像的确切宽度，就像这样：

JS Fiddle 3

calc()

.salo { position: relative; left: calc(50% - 100px); display: inline-block; } .salo img { display: block; margin: auto; }

仅使可居中的图像可点击

3 个答案: