如何在 CSS 中水平对齐多个图像

* {
  /* reset element */
  box-sizing: border-box;
}


/* parent flex element */

.wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  margin: 0 -7px;
  justify-content: space-between;
}


/* wrap the content and the image */

.image-wrapper {
  /* flex-grow: 1, flex-shrink: 1, flex-basis:calc(33.333% - 20px)*/
  /* we use calc to remove the margin from the width of the element */
  flex: 1 1 calc(33.333% - 20px);
  margin: 0 10px;
}


/* All of these styles are shared by the .img element */

.img {
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  margin-top: 50px;
  border: 3px solid red;
  height: 197px;
  width: 100%;
}

.img.img-01 {
  background-image: url("https://zupimages.net/up/19/51/vn88.jpg");
}

.img.img-02 {
  background-image: url("https://zupimages.net/up/19/51/9fik.jpg");
}

.img.img-03 {
  background-image: url("https://zupimages.net/up/19/51/dwq9.jpg");
}

<div class="wrapper">
  <div class="image-wrapper">
    <img class="img-01 img">
    <div class="img-01-title">Trust Management</div>
  </div>
  <div class="image-wrapper">
    <img class="img-02 img">
    <div class="img-02-title">Well Documented</div>
  </div>
  <div class="image-wrapper">
    <img class="img-03 img">
    <div class="img-03-title">Great Support</div>
  </div>
</div>