对齐 div 文本底部答案

【问题标题】：Align Div Text Bottom对齐 div 文本底部
【发布时间】：2013-07-24 16:28:37
【问题描述】：

由于某些原因，我无法让 div 的文本垂直对齐底部，除了涉及大量代码的解决方案之外，我几乎尝试了所有方法。

.products {
width: 191.25px;
height: 191.25px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px;
background: black;
color: white;
float: left;
text-align: right;
}

<h2>Header Two</h2>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>
<div class="products">Content for  class "products" Goes Here</div>

如果有人可以帮助我修复我的代码，以便将div 的文本垂直对齐到底部。

编辑：我尝试了以下方法：

添加到.product

display: table-cell;
vertical-align: bottom;

【问题讨论】：

标签： html css vertical-alignment text-alignment

【解决方案1】：

将内容包装在绝对定位的span 标记中。然后将div 设置为位置relative。然后，您可以使用span 的bottom 属性在div 内调整其高度。

HTML

<h2>Header Two</h2>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>
<div class="products"><span>Content for  class "products" Goes Here</span></div>

CSS

.products {
width: 191.25px;
height: 191.25px;
margin-left: 15px;
margin-bottom: 15px;
padding: 15px;
background: black;
color: white;
float: left;
text-align: right;
position:relative; /** Added **/
}

/** New Style **/
.products span{
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding: 15px;    
}

工作示例 http://jsfiddle.net/wD4yJ/

【讨论】：

【解决方案2】：

给文本另一个 div 怎么样？

我稍微修改了你的布局

<h2>Header Two</h2>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>
<div class="products"><div class="inner">Content for  class "products" Goes Here</div></div>

除了你的角色之外，他们还添加了这些角色：

.products {
display: table;
}
.inner{
display: table-cell;
vertical-align: bottom;
}

【讨论】：

【解决方案3】：

为了使文本与底部对齐，您需要为文本本身创建一个单独的类。我建议将文本放在段落标签上，并在 div 中的任意位置放置。

Working Example Here

<div class="products">
    <p class="bottom">Content for class "products" Goes Here</p>
</div>

【讨论】：