Html 如何使图像水平对齐，但对齐每个图像下方的可单击图像

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

代码如下：

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">

---

您需要做的是稍微修改HTML，使每个子图像与父容器中的主图像分组。在我的例子中，我与一类艺术家同行。然后只需将artist类设置为：

请注意，这些分隔符不再需要线条，并且可能还需要调整每个子图像的宽度

还有，别忘了关上你的门 齐马 零 vyrax n0kia！

---

我该如何在它们之间添加空间呢？您可能希望首先给它们一个一致的宽度，然后您会希望对.artist应用类似于右边距：20px的内容。您还需要防止应用最后一个。我刚刚更新了我的答案，以涵盖：

.artist {
  float: left;
}