如何将多个<图>元素在一行中居中？

Question

你好，堆栈溢出成员。

我有一个类似的问题，就像在 "如何使用CSS将多个inline-block元素居中？"的问题中讨论的那样。不幸的是，所提供的答案并没有帮助我，这就是为什么我不得不创建一个新的问题。

我使用了4个固定宽度的元素，我想把它们居中放在一排中。

<style>
.figurestyle {
  width:160px;
  padding-left:5px; 
  padding-right:5px;  
  margin-left:0px; 
  margin-right:0px;
  display:inline-block;
}
</style>

<div style="text-align:center;">
<figure class="figurestyle"><img src="img1.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text1</figcaption>
</figure>
<figure class="figurestyle"><img src="img2.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text2</figcaption>
</figure>
<figure class="figurestyle"><img src="img3.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text3</figcaption>
</figure>
<figure class="figurestyle"><img src="img4.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text4</figcaption>
</figure>
</div>

有谁知道答案吗？

欢呼声

Answer 1

几天前，我遇到了这个问题，事实上，并解决了通过使用 display: flex;. 像这样。

<style>
.figurestyle {
  width:160px;
  padding-left:5px; 
  padding-right:5px;  
  margin-left:0px; 
  margin-right:0px;
}

.parentFigureStyle {

    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

</style>

<div class="parentFigureStyle">
<figure class="figurestyle"><img src="img1.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text1</figcaption>
</figure>
<figure class="figurestyle"><img src="img2.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text2</figcaption>
</figure>
<figure class="figurestyle"><img src="img3.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text3</figcaption>
</figure>
<figure class="figurestyle"><img src="img4.jpg">
<figcaption style="text-align:center; padding-top:5px;">Text4</figcaption>
</figure>
</div>

一般来说，你应该把父系的 <div> 拥有 display: flex; 并将其排成一行，并将内容排在中间。这样应该就可以了。