css - 在 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>

标签： csshtml

Answer 1

您可以在样式中使用以下内容

display :inline-block;