左边图标右边文字，在div里居中

标签：des   style   blog   http   color   io   os   ar   java   

　　　　　　　　图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

　　哈哈，本章要记录的是章头说的两种方法，后面的是随手记得。

左边图标右边文字，在div里居中

标签：des   style   blog   http   color   io   os   ar   java   

原文地址：http://www.cnblogs.com/qing-xuanlvyee/p/4014709.html