1

我正在尝试将浮动 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 的底部。

4

3 回答 3

2

工作演示

您需要有 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; 
}​
于 2012-12-15T14:15:16.523 回答
1

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;
}
于 2012-12-15T14:22:10.137 回答
0

如果您不想要 div 容器,请尝试另一件事,设置边距顶部和底部。例如:

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

您将不得不修改测量值,50% 并不总是可以使用的量。我使用 9% 垂直对齐浮动的 :before 图像,位于我正在开发的移动网站上的按钮上。

于 2016-09-26T18:57:34.827 回答