Как заставить <img>выровнять, чтобы выровнять в div?

Question

.avator {
  text-align: justify;
}

<div class="avator">
  <img src="1.png" />
  <img src="2.png" />
  <img src="3.png" />
  <img src="4.png" />
  <img src="5.png" />
</div>

почему img не оправдано? 5 imgs в одну или две строки в зависимости от ширины div. все выровнено по левому краю.

это изображение.

Если я использую img @Temani Afif, это:

один и тот же код css. Почему дисплей не совпадает?

Answer 1

Он работает почти так же, как текст, поэтому, если вы хотите оправдать последнюю строку, вам понадобится взломать:

.avator {
  text-align: justify;
}
.avator:after {
  content:"";
  display:inline-block;
  width:100%;
}

<div class="avator">
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
  <img src="https://i.picsum.photos/id/10/100/100.jpg" >
</div>

Answer 2

Вы можете использовать display: flex для этого.

.avator {
  display: flex;
  justify-content: space-between;
}

.avator > * {
  flex: 0 0 auto;
}

<div class="avator">
  <img src="https://via.placeholder.com/64x64.png/666/fff/?text=A" />
  <img src="https://via.placeholder.com/64x64.png/666/fff/?text=B" />
  <img src="https://via.placeholder.com/64x64.png/666/fff/?text=C" />
  <img src="https://via.placeholder.com/64x64.png/666/fff/?text=D" />
  <img src="https://via.placeholder.com/64x64.png/666/fff/?text=E" />
</div>