正確設置網格佈局

Question

我需要構建如下所示的radio buttons。

圖像1

我試圖如下所示。

的.html

<ion-row> 
     <ion-col col-6> 
     <ion-grid radio-group formControlName="location"> 
      <ion-row> 
       <ion-col col-12> 
        <ion-item *ngFor="let l of locations;let index = index"> 
         <ion-label class="custom-radio"> 
          <ion-radio value="{{index}}"></ion-radio> 
           <i class="{{l.icon}}"></i><br/> {{l.description}} 
         </ion-label> 
        </ion-item> 
       </ion-col> 
      </ion-row> 
      </ion-grid> 
     </ion-col> 

    <ion-col col-6> 
    //other part   
    </ion-col> 
</ion-row> 

那麼它看起來像下面。

你能告訴我如何設計它看起來像image 1？

Answer 1

如果你可以發佈你的HTML和CSS，那麼我很樂意幫助你的實際代碼。但是，原則上，你可以做這樣的事情;

HTML

<div class="ion-item"> 
    <i class="l-icon"></i> 
    <span class="l-description">Text below the image</span> 
</div> 

CSS

.ion-item { 
    vertical-align: top; 
    display: inline-block; 
    text-align: center; 
    width: 60px; 
} 
.l-icon { 
    width: 50px; 
    height: 50px; 
} 
.l-description { 
    display: block; 
}