イオンCSSの問題私は以下の私のイオンアプリでレイアウトを下回る</p> <p><a href="https://i.stack.imgur.com/dqBx3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/dqBx3.png" alt="enter image description here"></a></p> <p>を達成したい画像

Question

の右下にセットイオンアイコンながら、私のコード

htmlコード

です

<div class="common_padding"> 
<ion-item text-center class="imagebg" no-padding (click)="openCameraActionSheet()"> 
    <img class="circle-pic" src="{{client.logo}}" style="height: 100px; width: 100px" /> 
    <ion-icon name="star" item-right></ion-icon> 

</ion-item> 

のCSSコード

page-profile { 

    .imagebg{ 
     background: map-get($colors,primary); 
     color: map-get($colors,whiteColor); 
    } 
    .common_padding{ 
    padding: 0; 


    } 
    .circle-pic{ 
     width:50px; 
    height:50px; 
    -webkit-border-radius: 50%; 
    border-radius: 50%; 
    } 

} 

と私は上記のコードを実行するとき、私は以下のような出力を得る

それは私がこの問題を解決することができますどのように私がイメージに近い任意のアイデアを、それを必要とするビューの右端を表示しますか？

Answer 1

htmlファイル

<div class="common_padding"> 
<ion-item text-center class="imagebg" no-padding (click)="openCameraActionSheet()"> 
    <div class="profile-image"> 
    <img class="circle-pic" src="{{client.logo}}" style="height: 100px; width: 100px" /> 
    <ion-icon name="star" item-right></ion-icon> 
    </div> 
</ion-item> 
</div> 

CSSファイル

.profile-image{ 
     margin:0px auto; 
    } 

私はあなたのためにその作業を願っています。