左边图标右边文字,在div里居中
图1
图2
css制作: 左边一个小图标,右边文字,两者之间一点间隔,再在一个div 里面居中显示。(div不设置宽度)
第一种做法:
图3
图4
.m-sn {
font-size: 12px;
color: #999;
background-color: #FFF;
line-height: 22px;
height: 22px;
padding-bottom: 24px;
text-align: center; // 这是最常用的
}
.m-sn span {
background: url('http://img.baidu.com/img/iknow/exp/article/article-sprite-v1.png') no-repeat scroll -241px -278px transparent;
display: inline-block; // *
width: 18px;
height: 15px;
margin-right: 2px;
vertical-align: middle; // *
}
第二种做法:
图5
图6
其他的:
-----------o
hover后:
其实 ,每个所谓li的背景,却是每个li的最后一个元素a元素设置的背景,position设置的是absolute,往上找li的position又是relative(这便是此处a的作用了) :
-----------o
哈哈,本章要记录的是章头说的两种方法,后面的是随手记得。