需要帮助垂直对齐li上的H3标签

Question

我需要一个h3坐在li的底部，它显示为一个块。我尝试过使用vertical-align，但它并没有按照我的意愿去做。目前，如果h3进入两条线，那么它向下延伸并越过li。相反，我希望h3能够向上发展，这意味着它不会超越李。

正如你所看到的，已经调整了风的教训，使它分成两行，但它不会向上生长，而是向下和在li之外。如何让它始终坐在底部？该网站位于：http://le1dev.co.uk/climb/4/

示例HTML：

<li class="rpwe-li rpwe-clearfix">
    <a class="rpwe-img" href="http://le1dev.co.uk/climb/4/lessons-from-the-wind/" rel="bookmark">
        <img class="rpwe-alignleft rpwe-thumb" src="http://le1dev.co.uk/climb/4/wp-content/uploads/2016/04/660x480-lessons-335x220.jpg" alt="Lessons from the Wind Lessons from the Wind">
    </a>
    <h3 class="rpwe-title">
        <a href="http://le1dev.co.uk/climb/4/lessons-from-the-wind/" title="Permalink to Lessons from the Wind Lessons from the Wind" rel="bookmark">Lessons from the Wind Lessons from the Wind</a>
    </h3>
</li>

示例CSS：

li {
    display: block !important;
    width: 330px !important;
    height: 222px !important;
    float: left !important;
    margin-right: 30px !important;
    margin-bottom: 30px !important;
}

h3 {
    background-color: rgba(0, 0, 0, 0.7) !important;
    clear: none;
    margin-bottom: 0!important;
    margin-top: 0!important;
    font-weight: 400;
    font-size: 22px!important;
    line-height: 1.5em;
    color: #FFF;
    position: relative;
    top: -33px;
    display: inline-block;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-weight: 600;
}

编辑：我设法通过将此添加到我的li来解决此问题：

li {
    position:relative;
}

这到了h3：

h3 {
    position:absolute;
    bottom:0px;
    display:block;
}