问答详情
源自：3-14 编程练习

如何让背景图垂直居中？如图所示，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://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>

http://img.mukewang.com/57e8f7c60001e86e03280206.jpg

提问者：wobugaosuni2 2016-09-26 18:26

个回答

  • 慕神9726083
    2016-09-26 20:15:20
    已采纳

    em{

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

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

    0
  • 慕神9726083
    2016-09-28 02:16:08

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

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

    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
  • 慕神9726083
    2016-09-26 20:16:53

    垂直居中我也不会。

    0
  • 慕神9726083
    2016-09-26 20:14:13

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

    0