将图像居中放在卡的中心

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>

输出：

Answer 2

您可以通过将text-align属性提供给父元素来实现。的 Live jsFiddle

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