我正在尝试获得类似于此处显示的列表: 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;
}
我的代码没有将元素居中对齐。
现在是这样显示的:
谢谢。
最佳答案
您可以使用属性:
display: flex;
justify-content: center;
在
<ion-row>
元素。
关于css - 如何使用ion-row和ion-col对齐ionic 2中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41379127/