Centering an image in the center of the card

Question

I'm trying to center the image in the middle of my card.

I tried applying additional styles like traditional HTML tags to center it, but no luck so far.

<article class="photo">
   <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;">
   <div class="overlay-gradient-tall-dark"></div>
   <section>
      <p class="text-auto-size">Spring Fling Fundraiser at Filoli</p>
   </section>
</article>

https://gist.github.com/stanzheng/8489645

Answer 1

This should work for you:

<article class="photo">
   <div style="width:100%; text-align:center">
      <img src="https://mirror-api-playground.appspot.com/links/filoli-spring-fling.jpg" style="width:50%; height:50%;">
   </div>
   <div class="overlay-gradient-tall-dark"/>
   <section>
      <p class="text-auto-size">Spring Fling Fundraiser at Filoli</p>
   </section>
</article>

Output:

Answer 2

You can do it by giving text-align property to the parent element. Live jsFiddle

<article class="photo" style='text-align:center;'>