在单个UL中，图像高于居中文本的UI / LI？

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;上的<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