Html 当使用padding top为流体布局保留纵横比时，如何将文本垂直居中于背景图像的中心？

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

整个列表元素需要是一个链接，该链接中的文本需要居中于具有背景图像的列表项。我需要这种液体，所以我选择使用填充顶部来保持纵横比并创建正确的高度。使用填充顶部来创建高度，我一辈子都不知道如何使文本垂直居中。我已经看到一些其他的问题在某种程度上解决了这个问题，但我没有发现一个问题得到回答<请帮帮我

这是一个活生生的例子。我需要文本垂直对齐到蓝色元素的中间。

HTML

---

好吧，在上下搜索之后，没有运气，我找到了它

CSS

垃圾桶呢

---

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

Infinity Designs的答案很好，但前提是您不需要跨越多行的内容

如果您确实需要在具有固定纵横比的响应性、动态高度和宽度垂直居中的容器中跨多行的内容，则有好消息和坏消息：

• 好消息：有一个纯CSS方法可以在GC、FF、IE7+等中使用
• 坏消息：代码不漂亮：它需要四个（！）包装器元素加上一个非语义间隔符。Infinity Design的方法只需要三个包装器，所以除非您需要文本包装，否则请使用它

它本质上是Infinity Design对响应流体纵横比的方法，混合使用嵌套块周围的并排

内联块

s和

垂直对齐

示例代码：

<div class="w1">  
   <!-- make w2 <a> if like the asker you want it all to be a clickable link -->
   <span class="w2"><span class="hh"> </span>
      <span class="w3"> <!-- make w3 <a> if don't want the bkg clickable  -->
         <span class="w4"><!-- or, any block element -->
            Monday
         </span>
      </span>
   </span>
</div>
<style>

.w1 {  /* outer wrapper for aspect ratio */
    position: relative; /*or absolute*/
    display: block; /*or inline-block*/
    padding-top: 25%; /*aspect ratio*/
}

.w2 {  /* wrapper2 resets position to top */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    }

.w3 {  /* wrapper3 and hh sit side by side */
    display: inline-block;
    width: 100%;
    text-align: center;
}
.w3, .hh {
    vertical-align: middle;
    display: inline-block;
}
.hh { height: 100% }

.w4 {  /* v.align applies to child block */
    display: block;
}

</style>

星期一
.w1{/*长宽比的外包装*/
位置：相对；/*或绝对*/
显示：块；/*或内联块*/
填充顶部：25%；/*纵横比*/
}
.w2{/*wrapper2将位置重置为顶部*/
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
显示：块；
}
.w3{/*wrapper3和hh并排放置*/
显示：内联块；
宽度：100%；
文本对齐：居中；
}
.w3、.hh{
垂直对齐：中间对齐；
显示：内联块；
}
.hh{高度：100%}
.w4{/*v.align适用于子块*/
显示：块；
}

不错。为了便于阅读，这里有一个JSBin的变体，其中删除或分离了非必要的代码——在GC、FF、IE8-10（视图中）中进行了测试。它还显示了这种垂直定心方法的一个缺点，即

线高度：0

阻止文本正常包装（在某些情况下可能是一个问题）请注意，

“hh”

元素的关闭标记和

“w3”

元素的开始标记之间的空格有时会导致问题。

        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;

            }

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

<div class="w1">  
   <!-- make w2 <a> if like the asker you want it all to be a clickable link -->
   <span class="w2"><span class="hh"> </span>
      <span class="w3"> <!-- make w3 <a> if don't want the bkg clickable  -->
         <span class="w4"><!-- or, any block element -->
            Monday
         </span>
      </span>
   </span>
</div>
<style>

.w1 {  /* outer wrapper for aspect ratio */
    position: relative; /*or absolute*/
    display: block; /*or inline-block*/
    padding-top: 25%; /*aspect ratio*/
}

.w2 {  /* wrapper2 resets position to top */
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    display: block;
    }

.w3 {  /* wrapper3 and hh sit side by side */
    display: inline-block;
    width: 100%;
    text-align: center;
}
.w3, .hh {
    vertical-align: middle;
    display: inline-block;
}
.hh { height: 100% }

.w4 {  /* v.align applies to child block */
    display: block;
}

</style>