CSS技能点--带图标的标题栏

1. 场景

标题栏往往都是带图标的，不然就太单调了，例如腾讯网：

一般都是左边图标，右边标题文字，接下来我们用CSS来实现下。

2. 实现过程

第1步，添加HTML：

	<div class="logo-area">
        腾讯网
    </div>

第2步，调整文字大小，并设置背景图，且背景图不重复：

 		.logo-area {
    
    
            font-size: 3em;
            background-image: url(tx.png);
            background-repeat: no-repeat;
        }

此时效果如下：

第3步，让文字远离图片：

 .logo-area {
    
    
            font-size: 3em;
            background-image: url(tx.png);
            background-repeat: no-repeat;
            padding-left: 48px;
}

此时效果：

第4步，让图片垂直居中，可以通过设定背景图的位置实现：

		.logo-area {
    
    
            font-size: 3em;
            background-image: url(tx.png);
            background-repeat: no-repeat;
            padding-left: 48px;
            background-position: left center;
        }

最终效果：

3. 小结

最后让图标垂直居中，也可以通过设置background-position属性具体偏离值来实现，但是上面提到的方式会更加容易一些。