将图像居中放置在卡的中央

Question

我试图将图像居中放置在卡片中间。

我尝试应用其他样式（如传统HTML标记）来居中，但到目前为止还算运气。

<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

这应该为您工作：

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

输出：