在离子项离子的中心添加图像

Question

<div class="card">
  <div class="item item-thumbnail-left  thumb-centre thumb-right">

  <img src="img/carryout-icon.jpg"></img>
  <img src="img/or.jpg"></img>
  <img src="img/delivery-icon.jpg"></img>

  </div> 
</div>

CSS：

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

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

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

演示：

http://play.ionic.io/app/91deb2272019

编辑：中心图像的垂直对齐问题这就是它在控制台中的样子。

Answer 1

在这里：http : //play.ionic.io/app/23c0460f51dc
要向左或向右对齐任何元素，您只需要float属性，并设置其值向左或向右。对于集中化，您只需要margin: 0 auto加上父 div 和text-align:center. 你的类将是这样的
CSS：

    .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 和 images 标签
：

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