CSS 在底部和中心垂直对齐

Question

我找到了很多解决方案，但 none 对我有用。在以下标记中，文本 "lorem ipsum example" 应在底部对齐并居中。我好像想不通！

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

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

<div class="wrapper">        
        <div id="box">
         <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/

CSS 在底部和中心垂直对齐

CSS align vertical at bottom and center

css

vertical-alignment

text-alignment