在背景图像上对齐元素

Question

我有以下HTML：

<li>
    <a href="#" class=".black">
          <p>Search</p><i class="fa fa-search"></i>
    </a>
</li>

li元素有背景图片，我想将a - 标记的内容放在图片的底部。我在小提琴中的例子显示了我使用flexbox的尝试，但我对任何支持IE-9的建议持开放态度。

http://jsfiddle.net/pkc5v106/3/

所以.black - 我需要在图像底部垂直对齐，p和i - 标签水平对齐。帮助赞赏。谢谢！

Answer 1

简单地说，您可以使用position:absolute;，然后将position:relative;提交给li

Jsfiddle