前端问题（html5+css3）

Question

我用margin-top和padding-top都无法将图片一中的数字调到类似图片二的位置，代码在第三张，跪求帮忙解答~

Answer 1

问题分析：

根据你的问题描述，可以得知，左侧的数字以及跟随其后的名称都是为字体。想达到的效果就是垂直居中。那么使用css的line-height就可以解决问题了。

举例如下：

根据你的代码，示例将设置多个li标签，高度为97像素。数字的字号为36像素，字体为微软雅黑。跟随其后的名称字号为22像素，字体默认。你可以根据实际需求进行调整。

HTML代码：

<ul>
    <li class="active">
        <span>01</span><a href="#">名称1</a>
    </li>
    <li>
        <span>02</span><a href="#">名称2</a>
    </li>
    <li>
        <span>03</span><a href="#">名称3</a>
    </li>
    <li>
        <span>04</span><a href="#">名称4</a>
    </li>
</ul>

CSS代码：

注意代码中的备注

ul, li{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
}
ul{
    width: 200px;
    border-top: 1px solid #ccc;
}
li{
    list-style: none;
    width: 200px;
    height: 97px;
    font-size: 22px;
    text-align: center;
    border: 1px solid #ccc;
    border-top: none;
}
li span, li a{
    /* è¿™é‡Œçš„前2行代码是解决你问题的关键 */
    line-height: 97px;
    vertical-align: middle;
    color: #777;
}
li span{
    font-size: 36px;
    font-family: '微软雅黑';
}
li.active{
    background-color: rgb(8, 180, 192);
}
li.active span, li.active a{
    color: #FFF;
}

页面初始化效果：

Answer 2

你的数字是图片还是字体？追问

字体。里面的框除了那个蓝色的是图片为背景，其他都是画边框的

追答

你需要把span加个display:block