CSS在底部和中心对齐垂直

Question

我发现了很多解决方案，但没有一个适合我。 在下面的标记中，文本“lorem ipsum example”应该在底部和居中对齐。我似乎无法弄清楚！

#box { 
 
\t \t background:#6CCB61 \t 
 
\t } 
 
\t .wrapper div { 
 
\t \t height: 240px; 
 
     width:100%; 
 
\t \t margin: 10px 0 20px 0; 
 
\t \t box-sizing:border-box; 
 
\t \t padding: 10px; 
 
\t \t color:white; 
 
\t \t text-align:center; 
 
\t } 
 
\t #boxGreen span { 
 
\t \t vertical-align: bottom; 
 
\t } 
 

 
\t .wrapper { 
 
\t \t width:auto; \t \t 
 
\t \t margin: 0 10px; 
 
\t } 
 
\t #boxGreen { 
 
\t \t width:100%; \t 
 
\t } 
 
}

<div class="wrapper">   
 
     <div id="box"> 
 
     \t <span>Lorem Ipsum Example</span> 
 
     </div> 
 
</div>

Answer 1

试试这个：

#box { 
    background:#6CCB61; 
    position: relative; 
} 

#box span { 
    position: absolute; 
    width: 100%; 
    left: 0; 
    bottom: 0; 
} 

https://jsfiddle.net/veefmgna/