Html 将文本放置在列表项中图像下方

所以我有一个图像翻转效果，需要两个图像在一个列表项中。然后，它们在CSS中相互覆盖，并在悬停状态下转换

我需要在每个图像下面添加一些文本，但由于其中一个图像是

position:absolute

它只是挂在图像后面：

我尝试将文本包装在段落标记中，但出于某种原因Wordpress正在编辑器中剥离它们（我猜是因为它在

li

中）。 我还尝试实现了一些

行高度

，但这也让它变得很糟糕

以下是HTML标记的示例：

<li>
<img class="alignnone size-full wp-image-153" alt="lucas2" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas2.png" width="117" height="117" />
<img class="alignnone size-full wp-image-154 top" alt="lucas1" src="http://localhost:8888/boost/wp-content/uploads/2013/05/lucas1.png" width="117" height="117" />
The Dungeon Master
</li>

---

总的来说，我试图让它尽可能简单，这样其他用户就可以进入编辑器，插入图像并添加文本，而无需在文本编辑器中编辑任何HTML。谢谢

为什么不使用top属性来移动可以看到的图像和文本

例如

---

你测试了IE10:-）请加小提琴？

.crew ul li {
display: inline-block;
list-style: none;
margin-left: 30px;
margin-right: 30px;
margin-bottom: 75px;
font-size: 1.1em;
font-style: italic;
color: #71767d;
font-weight: 300;
position: relative;
width: 117px;
height: 117px;
vertical-align: bottom;
}
.crew ul li img {
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
position: absolute;
left: 0;
}
.crew ul li img.top:hover {
opacity: 0;
cursor: pointer;
}

.crew ul li img {
   top: 10px;
}