请教css vertical-align:bottom;问题

Question

<dl>
   <dd><span>Process Yellow</span></dd>
   <dt style="background:#f7e214;"></dt>
</dl>
dl dd {
    text-align:center;
    height:25px;
    width:60px;
    line-height:25px;
    margin:auto auto 0 auto;
    background-color:Yellow;
}
dl dd span{
    background-color:Orange;
    font-size:11px;
}
dl dt{
    width:75px;
    height:75px;
    margin:0 auto;
}
为什么在dl dd 样式底下加 vertical-align:bottom; span整个内容不会移动到dd底下的呢?
请告知原因。
另我打算把span移动到dd底下应该怎么做。line-height不能用因为Process Yellow显示是两行的,用行高破坏布局

Answer 1

把样式写到span里才可以，margin-top:xxx

Answer 2

我在span里面试了也不行margin也不行,再指教

Answer 3

dl dd的宽度设小了。
将width:60px改成width:160px

Answer 4

dl dd的宽度是特意设少点，让浏览器把span的内容挤成多行请问怎么把整个span的内容放到dd的底下象这个vertical-align:bottom属性效果一样

Answer 5

vertical-align这个属性应该用在TD中才有效吧

Answer 6

难怪了，我放vertical-align这个属性在其他地方测试都没效果.
感谢 limii 

Answer 7

dl dd {
  text-align:center;
  height:25px;
  width:60px;
  padding-top:10px;
  background-color:Yellow;font-size:11px
}
dl dd span{
  background-color:Orange;
  font-size:11px;line-height:11px;
}

Answer 8

感谢 
newdigitime
(日月明之)
你的还是没达到我的要求 span的整个内容放在dd的底部