CODEWITHSUNDEEP
htmlcssionic-framework
CoderTn
CoderTn

Reputation: 997

How to align ionic HTML elements horizontally

i have these ionic HTML elements :

<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 : enter image description here

Upvotes: 1

Views: 905

Answers (1)

Evren
Evren

Reputation: 4410

Use flexbox for your main element

<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>

Upvotes: 1

Related Questions