css - 2行目のテキストを垂直に埋める方法はありますか?

Question

サイトにさまざまな製品を適切に並べるのに少し苦労しています。一部のアイテムには、テキストの 2 行目を作成するのに十分な長さの名前があり、その場合でも、アイテムは各画像の上部ではなく、テキストの上部に配置されます。基本的に、写真を押し下げて上部に配置するのではなく、各 div の上の空のスペースを使い切って 2 行目のテキストに合わせたいと考えています。これは、PHP 内のループで div を作成するために使用しているコードです。

<div class="new_prod_box">
  <a href="details.html">
    '.$title.'
  </a>
  <div class="new_prod_bg">
    <a href="details.html">
      <img src="images/'.$image.'" alt="'.$title.'" title="" class="thumb" border="0" />
    </a> 
  </div>
  <a href="cart.php?action=add&id='.$id.'">
    <u>Add to cart</u>
  </a>
</div>

ここに私が何を意味するかを説明する写真があります:私のウェブサイト

私のCSSのルールは次のとおりです。

.new_prod_box{
float:left;
text-align:center;
padding:10px;
width:132px;
height:180px;
}
.new_prod_box a{
padding:5px 0 5px 0;
color:#b5b5b6;
text-decoration:none;
display:block;


}
.new_prod_bg{
width:132px;
height:119px;
text-align:center;
background:url(images/new_prod_box.gif) no-repeat center;
position:relative;

}