html - 对齐彼此相邻的图像

Question

在这篇文章的开头，我可以对可能看过我的其他文章的少数人说说这件事。是的，我又问了一次，因为这是一个不同的问题，但属于同一类别。

当我尝试调整图像时，在图像下对齐文本似乎会破坏一切。这是网站的图片，图片下方没有文字: Image of the Crew Page

这是工作人员页面的代码，在文本之前:

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">

    </div>        
</section>

下面是我尝试在图像下放置文本后的页面图像: Image of the Crew Page after Text has been added

这是添加文本后的部分代码:

<section id="crew">
    <h1 style="color:#fff">Crew</h1>
<br>
<div style="justify-content:center" class="container5">

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <br><br><br><br><br>

    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>

    </div>        
</section>

如您所见，文字毁了一切，我只是不明白为什么它一直这样做。有什么想法吗？感谢您花时间阅读这篇文章

Answer 1

发生这种情况是因为 <figcaption>是display: block默认情况下，这意味着它占据了父元素的整个宽度。我建议您将带有相应标题的图像包装在一个 div 中。

.cont {
  display: inline-block;
  text-align: center;
}

<section id="crew">
    <h1 style="color: black">Crew</h1>
<br>
<div style="justify-content:center" class="container5">
<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <br><br><br><br><br>

<div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>
    <div class=cont>
    <img hspace="20" class="crew grow" src="http://nexuscoding.net/5h0GIcqwYiXafUkKEGYy.png">
    <figcaption>Some Text</figcaption>
    </div>

    </div>        
</section>

查看此 fiddle.