Выровняйте пять значков в два ряда, чтобы получился треугольник.

Question

изображение, которое я пытаюсь воссоздать

мой HTML и CSS код

Answer 1

Я добавил код html и css в соответствии с вашим изображением, пожалуйста, посмотрите.

Попробуйте запустить этот фрагмент кода:

img{
  height: 25px;
  width: auto
}



.members-wrapper{
  display: flex;
  flex-flow: row wrap;
   padding: 20px;
   
}

.members-wrapper > div {
    border: 3px dotted brown;
    padding: 20px;
    margin: 5px;
    flex: 1 1 20%;
    box-sizing: border-box;
    max-width: 25%;
   
}

.row1, .row2 {
  display:flex;
  justify-content: center
}

h4 {
  text-align:center
}

<div class="members-wrapper">
  <div class="team">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img2">
    </div>
    <div class="row2">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img3">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img4">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img5">
    </div>
    <h4>Team</h4>
  </div>
  <div class="board">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Board</h4>
  </div>
  <div class="mentors">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Mentors</h4>
  </div>
  <div class="advisors">
    <div class="row1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
      <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <div class="row2">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
        <img src="https://external-content.duckduckgo.com/iu/?u=https://cdn.iconscout.com/icon/free/png-256/account-profile-avatar-man-circle-round-user-30452.png&f=1&nofb=1" class="person img1">
    </div>
    <h4>Advisors</h4>
  </div>
</div>

Источник изображения: duckduck go

Надеюсь, это поможет !!