如何使用 ion-row 和 ion-col 对齐 ionic 2 中的元素？

Posted 2023-03-06

【中文标题】如何使用 ion-row 和 ion-col 对齐 ionic 2 中的元素？

【英文标题】：How to align elements in ionic 2 using ion-row and ion-col?

【发布时间】：2017-05-13 17:52:36

【问题描述】：

我正在尝试创建一个类似于此处显示的列表： http://arunsfolio.com/wp-content/uploads/2015/04/list-petro.png

我不确定我是否在 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;
    

我的代码没有对齐中心的元素。

现在是这样显示的：

感谢您的帮助。

谢谢。

【问题讨论】：

您是否尝试过 col 或 div 中的 text-center 类？在这里检查一些实用程序ionicframework.com/docs/v2/theming/css-utilities

感谢您的帮助。

【参考方案1】：

您可以使用以下属性：

display: flex;
justify-content: center;

在 <ion-row> 元素。

【讨论】：

您应该解释为什么这可以解决问题，而不是仅仅发布解决方案，以帮助将来遇到此问题的其他人。

@Jorge Hermosa。在 Galaxy Note3 上，您的解决方案不起作用。你对此有什么想法吗？

@smchae 不，我不知道 :(

只是因为flex

感谢 flexbox，这里有一个指南：css-tricks.com/snippets/css/a-guide-to-flexbox