Ul/LI圖像上方居中文字，在單個UL？

Question

我想知道是否有可能實現如我的模擬中所示的效果，其中單個ul與圖像的ul和文本的ul相對，以在單個ul中顯示下面的圖像和文本，使用CSS？ 像這樣

<ul> 
    <li><img src=""/><p>text</p></li> 
    <li><img src=""/><p>text</p></li> 
</ul> 

任何幫助將是巨大的，

乾杯

這裏的實物模型：

mock up http://oi57.tinypic.com/j61o2e.jpg

Answer 1

完全可行的。每個<li>獲取<img>和<p>標記，然後上的text-align:center;。

HTML

<ul> 
    <li> 
     <img src="http://placehold.it/100x100.png> 
     <p>Here's a caption</p> 
    </li> 
    <li> 
     <img src="http://placehold.it/100x100.png> 
     <p>And another caption</p> 
    </li> 
    <li> 
     <img src="http://placehold.it/100x100.png> 
     <p>One more caption</p> 
    </li> 
</ul> 

CSS

ul{ 
    text-align: center; 
} 
li{ 
    display: inline-block; 
} 

Codepen