在同一行上对齐 figcaption 和 figure 标签

如何解决在同一行上对齐 figcaption 和 figure 标签

就像标题所说的那样，我添加了 figcaption 和 figure 标签来为我的图片添加标题。显示了标题，但每个图像都显示在新行上。在我添加 figure 和 figcation 标签之前，我弯曲它们并将它们放在行方向，它们在同一条线上。任何人都可以提供见解。顺便说一下，我正在为此使用 repl.it IDE。我尝试添加图像，但告诉我错误

.img{
        display: flex;
        flex-direction: row;
        float: left;
        background-color: #626B63;
      }
//code for my image.

//code for the image captions
<figure>
    <img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png"  width= "200" height="200" style="padding: 3ch;">
 <figcaption>Bookings</figcaption>
    </figure>
<figure>
    <img src= "https://www.debatingeurope.eu/wp-content/uploads/2013/01/degrees.png"  width= "200" height="200" style="padding: 3ch; ">
     <figcaption>Bookings</figcaption>
    </figure>
<figure>
     <img src="https://cdn3.vectorstock.com/i/1000x1000/62/77/ticket-travel-airline-dollar-money-vector-12556277.jpg" width= "200" height="200" style="padding: 3ch; " >
     <figcaption>Bookings</figcaption>
    </figure>

.img {
  display: flex;
  flex-direction: row;
  float: left;
  background-color: #626B63;
}

<!-- code for my image. -->

<!-- code for the image captions -->
<figure>
  <img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width="200" height="200" style="padding: 3ch;">
  <figcaption>Bookings</figcaption>
</figure>
<figure>
  <img src="https://www.debatingeurope.eu/wp-content/uploads/2013/01/degrees.png" width="200" height="200" style="padding: 3ch; ">
  <figcaption>Bookings</figcaption>
</figure>
<figure>
  <img src="https://cdn3.vectorstock.com/i/1000x1000/62/77/ticket-travel-airline-dollar-money-vector-12556277.jpg" width="200" height="200" style="padding: 3ch; ">
  <figcaption>Bookings</figcaption>
</figure>

解决方法

这里我添加了一个带有 flex 的父容器以并排对齐 See more about flex。 Bcoz，图形标签是一个块元素，所以需要全宽。

并为具有一些默认边距的图形标签制作 margin: 0。

.container {
  display: flex;
  flex-wrap: wrap
}
.container figure {
  margin: 0;
  text-align: center
}
.img{
  display: flex;
  flex-direction: row;
  float: left;
  background-color: #626B63;
}

<div class="container">
<figure>
    <img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png"  width= "200" height="200" style="padding: 3ch;">
 <figcaption>Bookings</figcaption>
    </figure>
<figure>
    <img src= "https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png"  width= "200" height="200" style="padding: 3ch; ">
     <figcaption>Bookings</figcaption>
    </figure>
<figure>
     <img src="https://thepienews.com/wp-content/uploads/2017/12/Screen-Shot-2017-12-05-at-15.40.31-860x375.png" width= "200" height="200" style="padding: 3ch; " >
     <figcaption>Bookings</figcaption>
</figure>
</div>