html - 使用 padding-top 保留流体布局的纵横比时，如何将文本垂直居中放置在背景图像上？

Question

我还没有找到解决这个问题的方法，只要我能保留一些东西，我愿意改变我需要的任何东西。

整个列表元素需要是一个链接，该链接中的文本需要以具有背景图像的列表项为中心。我需要这种流体，所以我选择使用 padding-top 来保持纵横比并创建正确的高度。使用那个 padding top 来创建高度，我无法为我的生活弄清楚如何让文本垂直居中。我已经看到其他一些问题在某种程度上解决了这个问题，但我还没有找到一个答案。 请帮助我!

这是活生生的例子。我需要文本垂直对齐到蓝色元素的中间。 http://jsbin.com/OxuxECI/1/edit?html,css,output

HTML

<section>
      <ul>
          <li><a id="monday" href="_monday.html"><span>Monday</span></a></li>
      </ul>
    </section>

CSS

        section {
        position: relative;
        width: 86.029411764%;
        height: 100%;
        margin: -6px auto 0 auto;
        overflow: hidden;
        }   

        section ul {
        list-style-type: none;
        display: inline-block;
        width: 35%;
        min-width: 320px;
        padding: 0;
        margin: .8rem;
        height: 100%;
        }

        section li {
        width: 100%;
        display: block;
        background: url(_images/daybg_03.png) center center no-repeat;
            background-size: contain;
        margin: .8rem auto .8rem auto;
        text-align: center;
        font-size: 0;
        line-height: 0;
        }

        section ul li a {
        width: 100%;
        **padding-top: 14.95%;** /* This gives my container height */
        display: inline-block;
        text-decoration: none;
        text-align: center;

        }

        section ul li a span {
        font-size: 1.3rem;
        color: white;
        text-align: center;

            }

Answer 1

好吧，在搜索了高点和低点之后，没有运气，我已经弄明白了!!!

CSS

    section li {
position: relative;
width: 100%;
height: auto;
display: block;
background: url(_images/daybg_03.png) center center no-repeat;
    -webkit-background-size: contain;
    -moz-background-size: contain;
    background-size: contain;
margin: .8rem auto 0 auto;
list-style: none;
text-align: center;
font-size: 0;
padding-top: 14.95%;
}

    section ul li a {
position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
display: block;
text-decoration: none;
text-align: center;
background: rgba(0,191,85,.5);
}

    section ul li a span {
display: block;
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
line-height: 0;
font-size: 1.3rem;
color: white;
text-align: center;
background: rgba(0,159,255,.5);
    }

和垃圾桶 http://jsbin.com/enuBeyE/1/edit?html,css,output

我在那里保留了背景颜色，以便为每个容器提供视觉帮助。