<p>Using inline-block elemets</p>
<div class="box">
   <img src="https://picsum.photos/id/1/180/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box">
   <img src="https://picsum.photos/id/1/250/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box">
   <img src="https://picsum.photos/id/1/300/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<p>Using float elemets</p>
<div class="box f">
   <img src="https://picsum.photos/id/1/180/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box f">
   <img src="https://picsum.photos/id/1/250/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box f">
   <img src="https://picsum.photos/id/1/300/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<p>Using table elemets</p>
<div class="box t">
   <img src="https://picsum.photos/id/1/200/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<p>Inside a flexbox container</p>
<div style="display:flex">
<div class="box">
   <img src="https://picsum.photos/id/1/180/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box">
   <img src="https://picsum.photos/id/1/250/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
<div class="box">
   <img src="https://picsum.photos/id/1/300/100">
   <h2>Lorem ipsum dolor silert</h2>
</div>
</div>

.box {
  display: inline-block;
  border:1px solid red;
  margin:5px;
  text-align:center;
}
h2 {
  width: 0;
  min-width: 100%;
}
.f {
  float:left;
}
.t {
  display:table;
  margin:auto;
}
p {
  clear:both;
}