使用 HTML 和 CSS 对齐文本下方的图像

Question

我正在尝试对齐在一行中找到的三个图像，这些图像位于三个单独的列中，彼此高度相等。这些图像的大小为 348 x 628，但它们上方的文本会根据它们上方的文本量将它们向下或向上推。无论上面的文字如何，我如何对齐它们？为了响应式开发，我还试​​图确保上面的文字和下面的图片在同一列中。

这是我所拥有的：

<div>
    <div class="container">
        <div class="row">
            <div class="col">
                <div style="position: relative;">
                   <img style="float: left; margin-right: 10px;" src="{% "number1.png" %}" alt=""/>
                    <span style="display: block; overflow: hidden;">Click the "Sign-In" button</span>
                    <img src="{% static "image1.png" %}" alt="" style="position: absolute;">
                </div>

            </div>
            <div class="col">
                <div style="position:relative"> 
                    <img style="float: left; margin-right: 10px;" src="{% "number2.png" %}" alt=""/>
                    <span style="display: block; overflow: hidden">After Signing into your account, please click on the settings button</span>
                    <img src="{% static "image2.png" %}" alt="" style="position: absolute;">
                </div>
            </div>
            <div class="col">
                <div>
                    <img style="float:left; margin-right: 10px;" src="{% static "number3.png" %}" alt=""/>
                    <span style="overflow: hidden;">Select "Wifi"</span>
                    <img src="{% static "image3.png" %}" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

为什么不在 HTML 中使用figure-tag？您可以轻松地创建带有描述的图像。此外，CSS 仅用于将 figure 居中并显示边框。

这是 w3Schools 制作的文件：https://www.w3schools.com/tags/tag_figure.asp

代码如下：

* {
  margin: 0;
  padding: 0;
}

figure {
  width: 300px;
  display: block;
  margin: 0 auto;
  border: 1px solid;
  text-align: center;
}

<figure>
  <figcaption>Above Image</figcaption>
  <img src="https://via.placeholder.com/200">
</figure>

<figure>
  <img src="https://via.placeholder.com/200">
  <figcaption>Below Image</figcaption>
</figure>

您还可以使用 flexbox 制作响应式图片库：

#gallery {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

figure {
  text-align: center;
}

<div id="gallery">

  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>
  
  <figure>
    <img src="https://via.placeholder.com/200">
    <figcaption>Image Description</figcaption>
  </figure>

</div>