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;
}

我需要浮动div，因为我想并排放置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容器，请尝试另一件事，设置保证金顶部＆amp;底部。例如：

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

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

浮动div垂直对齐

3 个答案: