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

时间：2018-01-19 01:28:23

标签： html css

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

enter image description here

以下是代码：

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

1 个答案:

答案 0 :(得分：1)

您需要做的是稍微修改您的HTML，以便每个子图像分组，主图像位于父<div>容器内。在我的例子中，我已经使用了artist类。然后只需将artist课程设置为 float: left ：

.artist {
  float: left;
}

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

另外，请勿忘记在图片后使用<a>关闭</a>代码！否则链接将“泄漏”。通过，你最终会得到无效的标记！

解决此问题后，您将获得以下代码（可以复制粘贴并使用您自己的图像）：

＆＃13;
＆＃13; 
.artist {
  float: left;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

用绝对引用的图像替换相关图像看起来像这样：

＆＃13;
＆＃13; 
.artist {
  float: left;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

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

这会将伪选择器 :not 和 :last-of-type 组合在一起，以便每个艺术家分开一个人应用了规则，如下所示：

＆＃13;
＆＃13; 
.artist {
  float: left;
}

.artist:not(:last-of-type) {
  margin-right: 20px;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

希望这会有所帮助：）

相关问题
最新问题