title: Centering an image in the center of the card
body: <p>I'm trying to center the image in the middle of my card. </p>
  
  <p>I tried applying additional styles like traditional HTML tags to center it, but no luck so far.</p>
  
  <p><img src="https://i.stack.imgur.com/XSKFE.png" alt="Image looks like 1     e w"> </p>
  
  <pre><code>&lt;article class="photo"&gt;
     &lt;img src="https://mirror-api-playground.appspot.com/links/filoli-spring-fling.jpg"   style="  width:50%; 
        height:50%; 
        background:url(logo.png) center center no-repeat;"&gt;
     &lt;div class="overlay-gradient-tall-dark"&gt;&lt;/div&gt;
     &lt;section&gt;
        &lt;p class="text-auto-size"&gt;Spring Fling Fundraiser at Filoli&lt;/p&gt;
     &lt;/section&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><a href="https://gist.github.com/stanzheng/8489645" rel="nofollow noreferrer">https://gist.github.com/stanzheng/8489645</a></p>