javascript - 显示内联的框 div 及其下方的文本

Question

我有 3 张图像，我想以内联样式显示它们，但不使用 Bootstrap 网格系统，因为我希望它们彼此靠近并居中，我尝试这样做，但是一旦我添加了文本，它们就会得到显示在彼此之下，我该如何解决？这是我的代码:

.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>

Answer 1

您还可以在父级上使用 flex，它会将它们并排放置。

.boxes{
  display:flex;
  justify-content: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="text-center boxes">
  <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>