Question

DIV CSS 如何设置图片向下对齐！

DIV 代码：
<div class="main_center"> <div class="word"> <h2>办公用品<br><span>需用设别</span></h2> <ul> <li><a href="#">办公耗材</a>/<a href="#">书写工具</a></li> <li><a href="#">桌面用品</a>/<a href="#">财务用品</a></li> <li><a href="#">装订用品</a>/<a href="#">备用记事</a></li> </ul> </div> <div class="pic"> <dl> <dt><img src="image/pic.gif" width="69" height="59" /></dt> <dd><a href="#">彩色复印纸A4</a></dd> </dl> <dl> <dt><img src="image/pic (5).gif" width="77" height="45" /></dt> <dd><a href="#">派克式雅</a></dd> </dl> <dl> <dt><img src="image/pic (1).gif" width="40" height="59" /></dt> <dd><a href="#">多功能笔筒</a></dd> </dl> <dl> <dt><img src="image/pic (3).gif" width="75" height="54" /></dt> <dd><a href="#">自动号码机</a></dd> </dl> <dl> <dt><img src="image/pic (4).gif" width="82" height="44" /></dt> <dd><a href="#">订书机</a></dd> </dl> <dl> <dt><img src="image/pic (2).gif" width="40" height="56" /></dt> <dd><a href="#">记事本</a></dd> </dl> </div> </div>

CSS样式：
.main_center{height:195px; width:440px; margin-top:25px; background: url(../image/3%20(2).gif) 0 0 no-repeat; padding:8px; background:url(../image/yongping.gif) 0 0 no-repeat;}.word{ width:101px; height:45px; float:left;}.word h2{ font-family:"方正粗倩简体"; font-size:18px; color:#534640;}.word h2 span{ font-size:14px; color:#233343;}.word ul{ margin-top:10px;}

.pic{width:320px; height:183px; float:left;}.pic dl{ float:right; width:92px; height:86px; background: url(../image/pic%20yongping.gif) 0 0 no-repeat; margin:6px 3px 0 3px; text-align:center; line-height:2;}.pic dl dt{ width:88px; height:60px; margin-top:3px; overflow:hidden;}.pic dl dt img{ margin:auto 0 0 0;}.pic dl dd a{ color:#000;}.pic dl dd a:hover{ color:#F00;}
这是上面那段DIV的所有代码 和CSS 样式，只要是dl dd dt 里面的那段，那些小图片，如何设置它居下？因为这些图片不一样大，放在dl里面默认是居上的我想让这些小图片都按底部对齐，就比如说让订书机的小图片 和记事本小图片的底部对齐！

Answer 1

可以用 vertical-align:bottom;这个样式，或者对父元素定义position:relative,然后img定义position:absolute;bottom:0;

Answer 2

方法一：使用 display:table-cell; 此元素会作为一个表格单元格显示，然后使用vertical-align: bottom; 想下对齐（该方法ie浏览器低版本不兼容，或者直接用table 不要用div了 (<td valign="bottom">XXX</td>)
方法二：div使用padding-top: 通过计算内边距设置将图片顶到下方。

Answer 3

一般用
vertical-align:bottom;

vertical-align:middle;

来解决垂直对齐的问题。

Answer 4

text-align:bottom

Answer 5

设置dt的padding-top 或者定位img的position 然后bottom设置