[Solved] CSS how to align different size images with text inside row?

by


here is a solution:
Replace images by your images.

<!DOCTYPE html>
<html>
<head>
<style>
* {
  box-sizing: border-box;
}

.column {
  float: left;
  width: 25%;
  padding: 5px;
}

/* Clearfix (clear floats) */
.row::after {
  content: "";
  clear: both;
  display: table;
}
</style>
</head>
<body>

<div class="row">
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Snow" style="width:100%">
    <p style="text-align: center;">test1</p>
  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Forest" style="width:100%">
        <p style="text-align: center;">test2</p>

  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
    <p style="text-align: center;">test3</p>
  </div>
  <div class="column">
    <img src="https://freesvg.org/img/cartoonsun.png" alt="Mountains" style="width:100%">
    <p style="text-align: center;">test3</p>
  </div>
  
</div>

</body>
</html>

solved CSS how to align different size images with text inside row?