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.

Answer 2

在开始时将两者和标签放在标签内（图中的每一个）都是这样的：

＆＃13;

<figure>
  <img src="test.bmp" />
  <figcaption>
    hELLO
  </figcaption>
</figure>
<figure>
  <img src="test2.bmp" />
  <figCAPTION>
    hELLO
  </figCAPTION>
  </figure>

＆＃13;

然后将标签的样式设置为左侧浮动，如下所示：

＆＃13;

figure{float:left;}

＆＃13;

你应该得到你想要的东西。顺便看一下HTML中的（块和内联标签）和CSS中的（浮动，位置）。

将图像对齐在一起

2 个答案: