今天在做项目中（移动端页面 效果图为宽度720px 设置html font-size:72px），突然间被一个小问题困扰了一下下，不知道大家有没有遇到过：
ul高度100px li中的背景图片宽高均为12px.li的位置距离ul的下部高度26px.
此时要实现图片效果，我采用的办法是利用line-height.
设置ul的样式为：
{
position: absolute;
z-index: 99;
height: 1.389rem;
line-height: 2.056rem;
width: 100%;
bottom: 0;
background: -webkit-linear-gradient(top,rgba(204,204,204,0),rgba(0,0,0,1));
text-align: right;
}
设置li的样式为：
display: inline-block;
width:0.167rem;
height: 0.167rem;
background:url(../images/index/dot.png) no-repeat;
其中关键的样式为：ul的line-height:2.056rem;
计算思路及方法：
在进行对齐操作时，如果ul的高度和ul的行高一致，则实现的效果是li元素在ul的垂直居中位置。按照这个思路，如果li元素要在ul的底部,则行高需要时高度的两倍。 若li元素距离底部为26rem的情况，则行高的设置为：(ul的高度-26px)*2。