對齊文本底部

由於某些原因，我無法獲得此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;

來源

2013-07-25 Muhammad Carriere

那你試試？ –

包裹內容絕對定位的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/

來源

2013-07-25 00:07:51

怎麼樣給文本內部的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; 
}

來源

2013-07-25 00:09:47

爲了對齊文本，您將需要一個底部單獨的文本本身。我會建議把文本放在段落標籤上，並在任何你想要的位置放在div上。

Working Example Here

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

來源

2013-07-25 00:16:17 Thanos

對齊文本底部

回答

相關問題