4

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.

Image looks like 1 e w 

<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

Zach Johnson
  • 23,678
  • 6
  • 69
  • 86
StanleyZheng
  • 4,008
  • 3
  • 21
  • 24

2 Answers2

9

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:

enter image description here

Devrim
  • 15,345
  • 4
  • 66
  • 74
  • Are you sure that you need the width:100% on the div? Unless the default CSS changes the div behavior, divs are *block* elements, thus will already be width:100%... I think only the text-align:center is necessary. Check this fiddle: http://jsfiddle.net/shanonvl/9L2FP/ – shanonvl Jan 19 '14 at 05:36
1

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

<article class="photo" style='text-align:center;'>
Siamak Motlagh
  • 5,028
  • 7
  • 41
  • 65