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>

任何帮助都会很棒，

干杯

这是模型：

Answer 1

完全可行。每个 <li> 得到一个 <img> 和 <p> 标签，然后 text-align:center; 在 <ul>.

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

Ul/LI 图像位于居中文本上方，在单个 UL 中？

Ul/LI with image above centred text, in a single UL?

css

html-lists