javascript - 在其下面的文本内联显示框div

我有3张图片，我想以它们下面的文字显示它们的内联样式，但不使用引导网格系统，因为我希望它们彼此靠近并居中放置，我尝试这样做，但是一旦添加文字，它们就会显示在每张下方其他，我该如何解决？这是我的代码:

.box{
display:inline;
}

<div class="text-center">
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
<div class="box">
<img src="http://placehold.it/50x50" style="height:120px">
<p>Test</p>
</div>
</div>

最佳答案

CSS Flexbox 抢救(以及正确的HTML语义和无内联CSS样式)!

.container { display:flex; justify-content:center; }
.container figure { text-align:center; margin:0; }
.container img { height:120px; }

<div class="text-center container">
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
  <figure>
    <img src="http://placehold.it/50x50">
    <figcaption>Test</figcaption>
  </figure>
</div>