Проблема с отображением иконок в div, выравнивание

Question

Мне нужна помощь с приведенным ниже дизайном, каков наилучший способ выравнивания элементов?Чего я хотел бы добиться, так это чтобы все иконки отображались в одинаковых пропорциях, с одинаковыми отступами, полями и т. Д.

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

<div  class="grid grid--no-gutters">
          <div class="grid__item medium-up--one-half">
			<span class="safe-ico margin-ico" style="float:left; text-align:center;">
               <picture>
               
                <img src="{{'safe_buy_pink.png' |  file_img_url}}" style="width:auto;" alt="example"/>
              </picture> 
              <p class="ico-product">asdsad<br/>asdsad</p>
            </span>
            
            <span class="safe-ico" style="text-align:center;">
			  <picture>
            
                <img src="{{'delivery_pink.png' |  file_img_url}}" style="width:auto;" alt="example"/>
              </picture>  
              <p class="ico-product">Brezplačna<br/>% asdsadsa</p>
            </span>
            
          </div>
          <div class="grid__item medium-up--one-half" >
			<span class="safe-ico margin-ico" style="float:left; text-align:center;">
              <picture>
 
                <img src="{{'returns_pink.png' |  file_img_url}}" style="width:auto;" alt="example"/>
              </picture>  
              <p class="ico-product">asdsad<br/>asdsadsa</p>
            </span>
            
            <span class="safe-ico" style="text-align:center;">            
              <picture>
              
                <img src="{{'payments_pink.png' |  file_img_url}}" style="width:auto;" alt="example"/>
              </picture>            
              <p class="ico-product">Različne<br/>moasdsadžnosti asdsad</p>
            </span>            
          </div>
        </div>

Answer 1

Вы можете использовать следующее в стиле

display :inline-block;