                        课程
                    
                        /前端开发
                        
                            /HTML/CSS
                        
                        /企业网站综合布局实战

如何让背景图垂直居中？如图所示，01和背景图出现了分离，代码应该怎么写呢？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3.10新闻中心制作评测题</title>
<style type="text/css">
    *{
        margin:0;
        padding:0;
    }
    .topList{
        width:300px;
        margin:0 auto;
        height:190px;
        border:1px solid #E8E8E8;
    }
    .topList ul{
        list-style:none;
        padding:5px;
        font-size:12px;
    }
    .topList li{
        height:30px;
        line-height:30px;
    }
    em{
        display:inline-block;
        width:20px;
        height:16px;
        font-style:normal;
        text-align:center;
        color:#333;
        float:left;
        background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;
    }
    .top em{
        background:url(http://img1.sycdn.imooc.com//53cf0fa20001d3dc00200032.jpg) no-repeat 0 0;
    }
    a{
        text-decoration:none;
    }
</style>
</head>

<body>
    <div class="topList">
        <ul>
            <li class="top"><em>01</em>
                <p><a href="http://www.imooc.com/" >【慕客访谈用户篇】“有为屌丝”在路上</a></p>
            </li>
            <li class="top"><em>02</em>
                <p><a href="http://www.imooc.com/">【有奖活动】给父亲的三行书信</a></p>
            </li>
            <li class="top"><em>03</em>
                <p><a href="http://www.imooc.com/">《程序猿，请晒出你的童年》活动获奖公告</a></p>
            </li>
            <li><em>04</em>
                <p><a href="http://www.imooc.com/">【慕课访谈】破茧成蝶——美女程序员的蜕变史</a></p>
            </li>
            <li><em>05</em>
                <p><a href="http://www.imooc.com/">【获奖公告】追“球”巅峰，争当“预言帝”</a></p>
            </li>
            <li><em>06</em>
                <p><a href="http://www.imooc.com/">【问卷调查】慕课网用户学习情况大调查</a></p>
            </li>
        </ul>
    </div>
</body>

wobugaosuni2

2016-09-26

源自：企业网站综合布局实战 3-14

关注问题我要回答

1266

操作

收起

5 回答

慕神9726083 回答被采纳 +3 积分
2016-09-26

em{

margin-top:8px;
line-height: 16px;}

或者你再调一下margin-top 8是不是太下去了

0 回复有任何疑惑可以回复我~

收起回答

wobugaosuni2 提问者

非常感谢！

2016-09-26 回复有任何疑惑可以回复我~

wobugaosuni2 提问者

能解释下为什么设置line-height就可以把文字顶上去吗？这点比较困惑哦。

2016-09-26 回复有任何疑惑可以回复我~

慕神9726083 回复 wobugaosuni2 提问者

我给你答案不完全对,你的li标签里，你设置的height和line-height的问题你把line改小一点就行了，不用在em里再写一个line-height。你设置的30行高，文字直接在30这个高度里居中，改为16px 就在16px这个高度居中我也是刚学。共勉

2016-09-28 回复有任何疑惑可以回复我~

慕神9726083
2016-09-28

我给你答案不完全对,你的li标签里，你设置的height和line-height的问题你把line改小一点就行了，

不用在em里再写一个line-height。你设置的30行高，文字直接在30这个高度里居中，改为16px 就在16px这个高度居中

0 回复有任何疑惑可以回复我~

收起回答

wobugaosuni2 提问者
2016-09-26

能解释下为什么设置line-height就可以把文字顶上去吗？这点比较困惑哦。

.topList li{
        height:30px;
        line-height:30px;
    }
em{
        display:inline-block;
        width:20px;
        height:16px;
        font-style:normal;
        text-align:center;
        color:#333;
        float:left;
        background:url(http://img.imooc.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;
    }

0 回复有任何疑惑可以回复我~

收起回答