如何使用離子排和離子排對準離子2中的元素？

我試圖實現類似這裏顯示的一個列表： http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png 如何使用離子排和離子排對準離子2中的元素？

我不知道如果我缺少的東西SASS。

這是代碼：

<ion-row> 

    <ion-col width-40> 
     <h4>Esso</h4> 
     <p>Ungrester - 54</p> 
     <p>84859 - munch</p> 
    </ion-col> 
    <ion-col width-40> 
     <div class="priceStyle"> 
      <div class="priceChild"> 
       $123 
      </div> 

     </div> 
    </ion-col> 
    <ion-col width-10> 
     <div> 
     12KM 
     </div> 
    </ion-col> 
</ion-row> 


SCSS: 
.priceStyle { 
     background-color: lightblue; 
     display: flex; 
     flex-direction: column; 

     width: 100px; 
     height: 50px; 
     border-radius: 2px; 


    } 

.priceChild { 
     font-weight: bold; 
     font-size: 1.5em; 
     color: white; 
     margin: 0; 
     flex: 1; 
     justify-content: flex-end; 
     align-items: flex-end; 
    }

我的代碼不對準在中心的元素。

這是它是如何顯示現在：

感謝你的幫助。

謝謝。在 <ion-row>元素

display: flex; 
justify-content: center;

：

來源

2016-12-29 Deepak

您是否嘗試過col或div中的文本中心類？查看http://ionicframework.com/docs/v2/theming/css-utilities/ –

這裏的一些實用程序，謝謝你的幫助。 – Deepak

您可以使用屬性。

來源

2017-04-26 15:19:11 jorghe94

您應該解釋爲什麼這樣可以解決問題，而不是僅僅發佈解決方案，以幫助任何未來遇到此問題的人。 – Adam

非常感謝你的工作:) –

@Jorge Hermosa。在Galaxy Note3上，您的解決方案不起作用。你有什麼想法嗎？ – smchae

如何使用離子排和離子排對準離子2中的元素？

回答

相關問題