將卡片中心的圖像置於中心

我試圖施加額外的風格像傳統的HTML標記居中，但至今沒有運氣。

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

來源

2014-01-18 stanzheng

這應該爲你工作：

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

輸出：

enter image description here

來源

2014-01-18 20:10:17 Devrim

你確定你所需要的寬度：100％的股利？除非默認的CSS更改div行爲，divs是* block *元素，因此已經是寬度：100％...我認爲只有text-align：center是必要的。檢查這個小提琴：http://jsfiddle.net/shanonvl/9L2FP/ – shanonvl

您可以通過將text-align屬性賦予父元素來完成此操作。 Live jsFiddle

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

來源

2014-01-18 20:21:01

將卡片中心的圖像置於中心

回答

相關問題