Как расположить картинки с подписью в один ряд (линию)?

Question

Вот есть код, к картинкам применены одни свойства, в конце видно, что картинки идут в ряд, но если добавить текст или подпись к боксу, то они становятся в столбец. Помогите мне поставить их в ряд, вместе с подписью, может я что то не так делаю.

    .container .icon {
        width: 16.25%;
        padding-top: 3%;
        padding-left: 3.75%;
        padding-right: 3.75%;
    }
    .container div {
        display: inline;
    }

<center>
    <div class="container">
        <div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <p>
                    Image1
                </p>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <p>
                    Image2
                </p>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <p>
                    Image3
                </p>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <p>
                    Image4
                </p>
            </div>
        </div>
        <div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <figcaption>
                    Image1
                </figcaption>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <figcaption>
                    Image2
                </figcaption>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <figcaption>
                    Image3
                </figcaption>
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
                <figcaption>
                    Image4
                </figcaption>
            </div>
        </div>
        <div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
            </div>
            <div>
                <img class="icon" src="http://svgur.com/i/oJH.svg">
            </div>
        </div>
    </div>
</center>

Answer 1

Пример

.items {
  display: flex;
  flex-wrap: wrap;  
}

.item {  
  width: 16.25%;
  padding-top: 3%;
  padding-left: 3.75%;
  padding-right: 3.75%;
  margin-bottom: 1rem;
}

<center>
  <div class="container">
    <div class="items">
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <p>
          Image1
        </p>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <p>
          Image2
        </p>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <p>
          Image3
        </p>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <p>
          Image4
        </p>
      </div>
    </div>
    <div class="items">
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <figcaption>
          Image1
        </figcaption>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <figcaption>
          Image2
        </figcaption>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <figcaption>
          Image3
        </figcaption>
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
        <figcaption>
          Image4
        </figcaption>
      </div>
    </div>
    <div class="items">
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
      </div>
      <div class="item">
        <img class="icon" src="https://icons.iconarchive.com/icons/alecive/flatwoken/128/Apps-Icon-Template-icon.png">
      </div>
    </div>
  </div>
</center>

БЛОГ НА HUSL

Как расположить картинки с подписью в один ряд (линию)?

Ответы (1 шт):