将文本放在列表项目中的图像下方

Question

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

我有一些文字需要在每张图片下面，但由于其中一张图片是position:absolute，它只是挂在图片后面：

我试图将文本包装在段落标记中，但由于某种原因，Wordpress正在编辑器中删除它们（我猜它是在li内）。 我也试图实现一些line-height，但这也很容易。

以下是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>

这是CSS：

.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;
}

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

Answer 1

为什么不使用top属性来移动图像和文本？

E.g。

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