Search code examples
cssvertical-alignmenttext-alignment

CSS align vertical at bottom and center

I found lots of solution but none that worked for me. In the following markup the text "lorem ipsum example" should be aligned at the bottom and centered. I can't seem to figure it out!

#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>

Solution

  • try this :

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

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

    https://jsfiddle.net/veefmgna/