以下为关键部分代码，其他部分已经省略

    
                     
     
                  
商 品 价：
                  
      
                           
       ￥22.90                    
       (降价通知)                  
      
                
                
     
                  
商品编号：
                  
      
                           
       960148                  
      
                
                
     
                  
商品评分：
                  
      
                           
                           
       (已有47622人评价)                  
      
               
    

#summary{/*上外边距，上内边距，虚线上边框*/margin-top:10px;padding-top:10px;border-top:1px dotted #ddd;}#summary li,#choose li{line-height:24px;height:24px;padding:5px 0px;}#summary a{color:#005aa0;}#summary li>p,#choose li>p{/*宽度，右对齐，左浮动，行高*/font-family:simsun;width:72px;text-align:right;float:left;/*行高*/}#summary li div.content,#choose li div.content{/*浮动,行高*/float:left;}#summary_price b{/*大小，颜色*/font-size:18px;color:#e4393c;}#summary_grade span{/*显示模式，宽度，高度，背景*/display:inline-block;width:75px;height:15px;background:url(Images/iconlist_1.png) no-repeat -109px -238px;}

以上元素p b a div均为左浮动 最外围边框为ul的li

p的height为24px  b为24px  a为16px div自动为26px

对li设置height和line-height使li内的元素垂直居中对齐，效果如下图

p                div:      b                          a

有三种方法可以实现上图效果

上文的代码为第①种也是最为容易使用最不容易出现问题的方法，即

#summary li,#choose li{

由于直接按照p元素和b元素的高度设置li的height=24px，line-height=24px，且div的height变成了26px，会溢出边框，因为下文需要li的特性不能设置overflow：hidden

所以会导致下一个li左漂浮时被div阻断，如下图

弥补的措施为使用上下padding，使li变宽，将div包裹住，从而不影响下面的其他li

第②种方法

可能会觉得只要把li的height改为26px，line-height改为26px就可以了，但是这样是不行的

因为p b 和a元素都是自适应的高度，我们一般开发不会固定元素的高度增加开发的负担，

一旦调整li的line-height为26px 最高的元素div会增加height变为26px，div会以更高的height溢出，

所以，line-height=24px height=26px  继续按照p元素的高度进行对齐

但是如果p元素小于li的高度，那么这招也是没卵用

还是去设置line-height为24px调整p元素margin吧

反正就是别死心眼儿，line-height margin padding一块上吧，最快速度调试出最佳的居中对齐才是王道

 到目前我也不知道为什么，待后续研究，可能和基线什么的有关系吧

第③种

使用overflow但是限制颇多，所以不推荐