[英]How to align ionic HTML elements horizontally
i have these ionic HTML elements:我有这些离子 HTML 元素:
<ion-card-content>
<b style="font-size: 18px;" class="ion-float-left">Mes Jolts</b>
<ion-img src="./assets/images/jolt-coin.svg" style="height:20pt;width:20pt;" class="ion-float-right"></ion-img>
<b style="font-size: 35pt; color:var(--ion-color-primary); margin-right:5%;" class="ion-float-right">53</b>
</ion-card-content>
i want to get these elements horizontally aligned in the same line, this is what this code results in:我想让这些元素在同一行中水平对齐,这就是这段代码的结果:
Use flexbox for your main element使用 flexbox 作为主要元素
<ion-card-content style="width: 100% ;display: flex; justify-content: space-between; align-items: center">
<b style="font-size: 18px;" class="ion-float-left">Mes Jolts</b>
<div>
<ion-img src="./assets/images/jolt-coin.svg" style="height:20pt;width:20pt;"
class="ion-float-right"></ion-img>
<b style="font-size: 35pt; color:var(--ion-color-primary); margin-right:5%;"
class="ion-float-right">53</b>
</div>
</ion-card-content>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.