Css 在ionic项的中心添加图像

我如何更新它，使图像位于中心

.item.thumb-right img{
  position: absolute !important;
  top: 10px !important;
  right: 20px !important;
  margin-right: 20px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

演示：

编辑：中心图像的垂直对齐问题 这是它在控制台中的外观

---

您的Css不正确。使用边距：0自动将图像居中。
没有像position:center这样的css属性

你看起来像这样吗

.item.thumb-centre img{
  position: center !important;
  top: 10px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

给你：
要向左或向右对齐任何元素，只需使用属性，并将其值设置为向左或向右。对于集中化，您只需要

margin:0 auto

加上父div和

text align:center

。 您的课程将是这样的
CSS:

.item.thumb-right img{
  position: absolute !important;
  top: 10px !important;
  right: 20px !important;

  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

.item.thumb-centre img{
margin:0 auto;
  top: 10px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

.item.item-thumbnail-left{
  margin-left: 20px !important;

}

    .images-parent{
      text-align: center;
    }

    .left-image{
      float:left;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .center-image{
      margin:0 auto;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .right-image{
      float:right;
      max-width: 80px !important;
      max-height: 80px !important;  
    }

只需通过这种方式将它们分配给项目和图像标签
HTML:

.item.thumb-right img{
  position: absolute !important;
  top: 10px !important;
  right: 20px !important;

  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

.item.thumb-centre img{
margin:0 auto;
  top: 10px !important;
  max-width: 80px !important;
  max-height: 80px !important;
  width: 100%  !important;
}

.item.item-thumbnail-left{
  margin-left: 20px !important;

}

    .images-parent{
      text-align: center;
    }

    .left-image{
      float:left;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .center-image{
      margin:0 auto;
      max-width: 80px !important;
      max-height: 80px !important;
    }

    .right-image{
      float:right;
      max-width: 80px !important;
      max-height: 80px !important;  
    }

---

将您的img标签放在p标签内

 <div class="item images-parent">
  <img src="img/carryout-icon.jpg" class="left-image"></img>
  <img src="img/or.jpg" class="center-image"></img>
  <img src="img/delivery-icon.jpg" class="right-image"></img>
  </div>

---

我希望这对你有用。

没有

位置：中间
，你有三张图像，你想要哪一张在中间？您是否在父元素上尝试了
text align:center
？但无效。你能不能更新一下演示，看看效果如何？没有效果。请你更新一下演示，看看效果如何？@SimranKaur你有三张图片吗？你想要所有的还是只有一个？我只想要一个。一个在左边，一个在右边，一个在中间。我有图像出现在左，右角与给定的css，但不在中心。我希望or.jpg处于中心位置。@SimranKaur我已经编辑了我的答案。请查看我答案中更新的演示。你是救世主：）非常感谢：为我工作