Центрирование всех добавленных изображений в созданном элементе в JavaScript

Question

Я хотел бы знать, как можно центрировать все динамически добавленные изображения в созданном элементе в JavaScript.

var imagePlaceholder = document.createElement('image-placeholder')

for (i = 0; i < imgstoload.length; i++) {

  imgstoload[i].onload = function() {

    […]

    imagePlaceholder.appendChild(imgstoload[t]);
    […]
  }

}

Так, если загружено 1 изображение, оно должно отображаться в центр изображения-заполнителя. Если бы 2 были загружены (учитывая, что изображение заполняет 20% заполнителя изображения) от 0 до 20%, оно показало бы пустое пространство, от 20% до 40% первого изображения, от 40% до 60 % пустого пространства, от 60% до 80% другого изображения и снова от 80% до 100% пустого пространства.

Дело в том, что все изображения центрируются.
Что было бы возможным способом сделать это?

Пока что я пробовал следующее безрезультатно:

imagePlaceholder.display="block"
imagePlaceholder.style.margin="auto"

и

imagePlaceholder.style.align="center"

Следуйте совету Wezelkrozum. Я попробовал следующее в стиле тег моей HTML веб-страницы:

<style>
  […]
  #image-placeholder {
  display: flex;
  justify-content: space-around;
  }
 </style>

Но не только он не работает, но и заставляет другие компоненты, которые правильно отображались, отображаться неправильно.

Я делаю что-нибудь не так?

Answer 1

Использование дисплея flex с пробелом здесь проще.

.image-placeholder {
  display: flex;
  justify-content: space-around;
  width: 100%;
}

<div class="image-placeholder">
  <img src="https://via.placeholder.com/150">
  <img src="https://via.placeholder.com/150">
</div>