Flo div垂直对齐

Question

我想垂直对齐浮动div中的文本到底部，但它似乎不工作。以下是我目前有：

<div class="header_left">TEXT</div> 

CSS：

.header_left { 
width: 50%; 
text-align: left; 
float: left; 
vertical-align: bottom; 
border-bottom: 1px solid #666; 
} 

我需要的股利是浮动的，因为我想并排放置2 div的一面，但我似乎无法使文字去div的底部。

Answer 1

Working DEMO

你需要有2周的div相对和绝对位置来实现这一目标。

<div id="container"> 
    <div id="content">Bottom Content</div> 
</div>​ 

#container 
{ 
    position: relative; 
    height: 200px; 
    background-color: #eee; 
} 

#content 
{ 
    position: absolute; 
    bottom: 0; 
}​ 

Answer 2

http://jsfiddle.net/2Z6tA/1/

<div class="header_left"> 
    <span id="bottom">Text at bottom</span> 
</div> 

CSS： -

.header_left { 
width: 50%; 
text-align: left; 
float: left; 
vertical-align: bottom; 
border-bottom: 1px solid #666; 
height:100px; 
position: relative;  
} 

span#bottom{ 
    position: absolute;  
    bottom: 0; 
} 

Answer 3

另一件事尝试，如果你不希望一个div容器，设置距顶部&底部。例如：

.header_left { 
margin-top:50% 
margin-bottom:50% 
} 

您必须修改测量值，50％并不总是用量。我使用9％垂直对齐浮动：在我正在处理的移动网站上的按钮之前的图像。