html - ionic css 问题，同时将右下角的 ionic 图标设置为图像

Question

我想在我的 ionic 应用中实现以下布局

下面是我的代码

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%;
    }

 }

当我运行上面的代码时，我得到如下输出

它显示在 View 的右端我需要它靠近图像任何想法我该如何解决这个问题？

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

我希望它对你有用。