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

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

来源：3-14 编程练习

wobugaosuni2

2016-09-26 18:26

<!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://img.mukewang.com/53cf0fa20001d3dc00200032.jpg) no-repeat 0 -16px;
    }
    .top em{
        background:url(http://img.mukewang.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>

写回答关注

5回答

慕神9726083

2016-09-26 20:15:20

已采纳

em{
margin-top:8px;
line-height: 16px;}
或者你再调一下margin-top 8是不是太下去了

3 0

慕神9726... 回复wobuga...

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

2016-09-28 02:18:12

共 3 条回复 >
慕神9726083

2016-09-28 02:16:08

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

0 0

wobugaosuni2: 2016-09-26 22:09:42

能解释下为什么设置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 0

慕神9726083

2016-09-26 20:16:53

垂直居中我也不会。

0 0
慕神9726083

2016-09-26 20:14:13

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

0 0

企业网站综合布局实战

本课程重点介绍HTML/CSS实现常见企业网站布局的方法

157042 学习 · 1984 问题

查看课程

相似问题

em中背景图片如何定位

回答 1

背景颜色和背景图片

回答 2

怎么让背景图片离边框远一点？

回答 2

背景图不显示

回答 1

为什么背景图片没了

回答 1

打开慕课网App查看更多内容