2016-12-29 94 views
4

我试图实现类似这里显示的一个列表: 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; 
    } 

我的代码不对准在中心的元素。

这是它是如何显示现在:

enter image description here 感谢你的帮助。

谢谢。在 <ion-row>元素

display: flex; 
justify-content: center; 

+1

您是否尝试过col或div中的文本中心类?查看http://ionicframework.com/docs/v2/theming/css-utilities/ –

+0

这里的一些实用程序,谢谢你的帮助。 – Deepak

回答

6

您可以使用属性。

+1

您应该解释为什么这样可以解决问题,而不是仅仅发布解决方案,以帮助任何未来遇到此问题的人。 – Adam

+0

非常感谢你的工作:) –

+0

@Jorge Hermosa。在Galaxy Note3上,您的解决方案不起作用。你有什么想法吗? – smchae