考拉海购(边框-浮动_01)

之前让图片垂直居中对齐的时候，我写错了，

line-hegiht 只是让文本和行内级元素垂直居中显示，vertical-align: middle; 只是让行内级元素跟line-height 基线对齐，所以这种效果不是真正的垂直居中对齐。不推荐使用！！！

行内级盒子的中心点与父盒基线加上x-height一半的线对齐

.box .list li .item {

position: relative;

display: inline-block;

/* 2.增加小盒子的宽度 1px,如果超出调整最后一个小盒子的宽度 */

/* width: 220px; */

width: 221px;

height: 167px;

/* 1.1解决边框重叠 */

/* margin-left: -1px; */

/* 1.直接解决边框重叠 */

margin-right: -1px;

border: 1px solid #eaeaea;

box-sizing: border-box;

}

.box .list li .item > img {

/* 让图片垂直水平居中对齐 */

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}