html - 如何使图像水平对齐，但在每个图像下方对齐可点击图像

Question

我一直在寻找这样的问题，但找不到。我试图使它水平而不是垂直:

代码如下:

ghost<br class="newline">
<img src="resources/images/ghost.png" height=75 width=75>
<br class="newline">
<a href="http://instagram.com/ghost2000_" target=blank><img src="resources/images/instagram.png" height=20 width=20>
<a href="https://twitter.com/_ghost2000" target=blank><img src="resources/images/twitter.png" height=20 width=20>
<a href="https://twitter.com/_ghost2000" target=blank><img src="resources/images/soundcloud.png" height=20 width=25><br class="newline">
tshima<br class="newline">
<img src="resources/images/tshima.png" height=75 width=75>
<br class="newline">
<a href="https://www.instagram.com/ifinallyfigureditout/_" target=blank><img src="resources/images/instagram.png" height=20 width=20>
<a href="https://www.facebook.com/tshimashimatshima/" target=blank><img src="resources/images/facebook.png" height=20 width=20>
<a href="https://soundcloud.com/cheatar1" target=blank><img src="resources/images/soundcloud.png" height=20 width=25>
<a href="https://tshima.bandcamp.com/" target=blank><img src="resources/images/bandcamp.png" height=20 width=20><br class="newline">
zero<br class="newline">
<img src="resources/images/zero.jpg" height=75 width=75>
<br class="newline">
<a href="http://instagram.com/sg_zero" target=blank><img src="resources/images/instagram.png" height=20 width=20>
<a href="https://soundcloud.com/zer0" target=blank><img src="resources/images/soundcloud.png" height=20 width=25><br class="newline">
vyrax<br class="newline">
<img src="resources/images/vyrax.jpg" height=75 width=75>
<br class="newline">
n0kia !<br class="newline">
<img src="resources/images/n0kia.jpg" height=75 width=75>
<br class="newline">

Answer 1

您需要做的是稍微修改您的 HTML，以便每个子图像都与父图像中的主图像分组 <div>容器。我上了一个类 artist在我的例子中。然后简单地设置 artist类到 float: left :

.artist {
  float: left;
}

请注意，您将不再需要 <br>这些线 <div>分隔符，你可能还想调整 width对于您的每个子图像。

此外，不要忘记关闭您的 <a>带有 </a> 的标签在你的图像之后!否则链接将“泄露”，你最终会得到无效的标记!

解决这个问题会得到以下代码
(可以复制粘贴并使用您自己的图像):

.artist {
  float: left;
}

<div class="artist">
  ghost
  <br class="newline">
  <img src="resources/images/ghost.png" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/ghost2000_" target=blank><img src="resources/images/instagram.png" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="resources/images/twitter.png" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="resources/images/soundcloud.png" height=20 width=25></a>
</div>

<div class="artist">
  tshima
  <br class="newline">
  <img src="resources/images/tshima.png" height=75 width=75>
  <br class="newline">
  <a href="https://www.instagram.com/ifinallyfigureditout/_" target=blank><img src="resources/images/instagram.png" height=20 width=20></a>
  <a href="https://www.facebook.com/tshimashimatshima/" target=blank><img src="resources/images/facebook.png" height=20 width=20></a>
  <a href="https://soundcloud.com/cheatar1" target=blank><img src="resources/images/soundcloud.png" height=20 width=25></a>
  <a href="https://tshima.bandcamp.com/" target=blank><img src="resources/images/bandcamp.png" height=20 width=20></a>
</div>

<div class="artist">
  zero
  <br class="newline">
  <img src="resources/images/zero.jpg" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/sg_zero" target=blank><img src="resources/images/instagram.png" height=20 width=20></a>
  <a href="https://soundcloud.com/zer0" target=blank><img src="resources/images/soundcloud.png" height=20 width=25></a>
</div>

<div class="artist">
  vyrax
  <br class="newline">
  <img src="resources/images/vyrax.jpg" height=75 width=75>
</div>

<div class="artist">
  n0kia !<br class="newline">
  <img src="resources/images/n0kia.jpg" height=75 width=75>
</div>

用绝对引用图像替换相对图像如下所示:

.artist {
  float: left;
}

<div class="artist">
  ghost
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/ghost2000_" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
</div>

<div class="artist">
  tshima
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="https://www.instagram.com/ifinallyfigureditout/_" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://www.facebook.com/tshimashimatshima/" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://soundcloud.com/cheatar1" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
  <a href="https://tshima.bandcamp.com/" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
</div>

<div class="artist">
  zero
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/sg_zero" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://soundcloud.com/zer0" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
</div>

<div class="artist">
  vyrax
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
</div>

<div class="artist">
  n0kia !<br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
</div>

请注意，您可能希望将它们隔开一点，这可以通过 margin-right 来完成。在每个 artist类。请注意，您可能不希望它出现在最后一位艺术家身上，因此您会想要定位。这可以通过将规则添加到 .artist:not(:last-of-type) 来实现.

这结合了伪选择器 :not 和 :last-of-type ，以便除最后一位之外的每位艺术家都应用该规则，如下所示:

.artist {
  float: left;
}

.artist:not(:last-of-type) {
  margin-right: 20px;
}

<div class="artist">
  ghost
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/ghost2000_" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://twitter.com/_ghost2000" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
</div>

<div class="artist">
  tshima
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="https://www.instagram.com/ifinallyfigureditout/_" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://www.facebook.com/tshimashimatshima/" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://soundcloud.com/cheatar1" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
  <a href="https://tshima.bandcamp.com/" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
</div>

<div class="artist">
  zero
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
  <br class="newline">
  <a href="http://instagram.com/sg_zero" target=blank><img src="http://placehold.it/100" height=20 width=20></a>
  <a href="https://soundcloud.com/zer0" target=blank><img src="http://placehold.it/100" height=20 width=25></a>
</div>

<div class="artist">
  vyrax
  <br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
</div>

<div class="artist">
  n0kia !<br class="newline">
  <img src="http://placehold.it/100" height=75 width=75>
</div>

希望这有帮助:)