对齐 div 文本底部
Posted
技术标签:
【中文标题】对齐 div 文本底部【英文标题】:Align Div Text Bottom 【发布时间】: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;
【问题讨论】:
【参考方案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>
【讨论】:
以上是关于对齐 div 文本底部的主要内容,如果未能解决你的问题,请参考以下文章