Center Aligning Flex Container with Left Aligned Elements

Question

I have a flex container that contains both copy and several images. Currently, the images are all center aligned. How can I update the css so that the image container is center aligned but the images are left aligned? See current and desired output images.

HTML

.main-wrapper {
  width: 140px;
}

.container {
  padding-top: 8px;
  padding-left: 0;
  padding-right: 0;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}

.test-copy {
  color: #001833;
  padding-bottom: 8px;
  width: 75%;
  font-size: 12px;
  text-align: center;
}

.logos {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.img {
  display: block;
  max-width: 100%;
  width: 34px;
}

<div class="main-wrapper">
  <div class="container">
     <span width="75%" class="test-copy">
       Test Copy Test Copy Test Copy
    </span>
     <div class="logos">
        <div class="logo-container">
          <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" width="34,39,44" class="img">
        </div>
        <div class="logo-container">
          <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" width="34,39,44" class="img">
        </div>
        <div class="logo-container">
          <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" width="34,39,44" class="img">
        </div>
        <div class="logo-container">
          <img src="https://www.freepnglogos.com/uploads/netflix-logo-0.png" width="34,39,44" class="img">
        </div>
     </div>
  </div>
</div>

Current Output

Desired Output

I don't understand what you want, your picture show what the snippet does — Elikill58, Oct 26 '21 at 16:33
@Elikill58 I've updated the post with current and desired output — Michael, Oct 26 '21 at 16:35
Oh ok thanks ! And why don't make a second line with another `div` ? — Elikill58, Oct 26 '21 at 16:38
I would like to keep it in one div. This is an example, but there may be several images in this container. — Michael, Oct 26 '21 at 16:40
Ok, to make it responsive ? (So for phone, the first png go back to left?) — Elikill58, Oct 26 '21 at 16:41

Center Aligning Flex Container with Left Aligned Elements

0 Answers0