CSS在底部和中心垂直对齐

Posted 2023-03-05

【中文标题】CSS在底部和中心垂直对齐

【英文标题】：CSS align vertical at bottom and center

【发布时间】：2017-01-30 17:52:36

【问题描述】：

我找到了很多解决方案，但没有一个对我有用。 在以下标记中，文本“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>

【参考方案1】：

试试这个：

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


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

https://jsfiddle.net/veefmgna/