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