add an image in centre of ion item ionic

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

How do I update this so as to have the image in the center

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

Demo:

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

Edit: Problem with verticle alignment of centre image This is how it looks like in console.

Answer 1

Here you go: http://play.ionic.io/app/23c0460f51dc
To align any element left or right you simply need float property , and set its value left or right. And for centralization you need just margin: 0 auto plus having parent div with text-align:center. Your classes will be like this
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;  
    }

And simply assign them to item and images tags this way
HTML:

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

Answer 2

Put your img tag inside of p tag.

<p style="text-align: center">
    <img src=....>
</p>

I hope this work for you.