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/