在div中对齐显示图标出现问题

Question

我需要以下设计的帮助，对齐项目的最佳方法是什么？ 我想要实现的是让所有图标以相等的比例，相同的填充，边距等显示。

当页面折叠到移动视图时，两个图标应位于顶部，两个图标应位于下方。这就是为什么我有两个中型div。

<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;