如何设置内联div与背景图像和文本?

时间:2012-12-13 11:17:10

标签: html css

<div class="cn_header">
    <div class="print"></div>
    example
</div>​

.cn_header{
    background: #C2E1FF;
    height: 24px;
    line-height: 24px;
    padding: 5px;
}

.print{
    background: url(http://mcgrefer.com/images/search.png);
    display: inline-block;
    height: 24px;
    width: 24px;
}
​

http://jsfiddle.net/Luntegg/2SCvf/1/

如何使用背景图像和文本设置内联div?

2 个答案:

答案 0 :(得分:2)

vertical-align:middle;

上设置.print

<强> Demo

答案 1 :(得分:0)

将文字放在div中:

http://jsfiddle.net/2SCvf/3/

<div class="cn_header">
    <div class="print">example</div>
</div>


.cn_header{
    background: #C2E1FF;
    height: 24px;
    line-height: 24px;
    padding: 5px;    
}

.print{
    background-image: url(http://mcgrefer.com/images/search.png);
    display: inline-block;
    height: 24px;
    width: 24px;
    padding-left: 30px; /* This */
    background-repeat: no-repeat; /* And This One */
}