title: How to center image with width in ion-card
body: <p>I need to center my image in ion-card. I am using width to small the image so thats why its causing problem to center image. </p>
  
  <p>My html code.</p>
  
  <pre><code>&lt;ion-content&gt;
  
    &lt;ion-card class="no-shadow"&gt;
              &lt;ion-grid  class="ion-no-padding"&gt;
                &lt;ion-row class="ion-align-items-center ion-justify-content-center" &gt;
                  &lt;ion-col size="6" &gt;
                    &lt;ion-card class="card-img"&gt;
                        &lt;img src="../../assets/imgs/cat-icon.png" &gt;
                        &lt;div&gt;&lt;h4&gt;Programming&lt;/h4&gt;&lt;/div&gt;
                    &lt;/ion-card&gt;
                  &lt;/ion-col&gt;
                &lt;/ion-row&gt;
              &lt;/ion-grid&gt;
    &lt;/ion-card&gt;
  
  &lt;/ion-content&gt;
  </code></pre>
  
  <p>.scss</p>
  
  <pre><code>ion-content{
      --ion-background-color:  #202849 !important;
  }
  
  
  .no-shadow{
  box-shadow: none !important;
  }
  
  
  ion-row{
      ion-card{
      text-align:center;
      width:100% !important;
      margin: 0 !important; // I also dont think important is neccesary
      img{
          width:90px;
          border-radius: 50px;
      }
  }
  }
  </code></pre>
  
  <p>Its showing image on left side. I need to show in center here is the image of output</p>
  
  <p><a href="https://i.stack.imgur.com/X2y5A.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/X2y5A.png" alt="enter image description here"></a></p>