CODEWITHSUNDEEP
cssionic-framework
Simran Kaur
Simran Kaur

Reputation: 1101

add an image in centre of ion item ionic

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

enter image description here

Upvotes: 4

Views: 11065

Answers (3)

Celso Bring
Celso Bring

Reputation: 33

Put your img tag inside of p tag.

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

I hope this work for you.

Upvotes: 1

Mudasser Ajaz
Mudasser Ajaz

Reputation: 6257

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>

Upvotes: 6

Vishu238
Vishu238

Reputation: 673

Your Css is not proper. Use margin:0 auto; to center the image.
There is no css property like position:center

Are you looking something like this

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

}

Upvotes: 0

Related Questions