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

竖直方向居中

老师说了好几遍的一个技巧：把line-height 与div的高度设置为一致，盒子里的内容就会在竖直方向居中。但是我发现这个技巧没用。我试了Chrome, Firefox, IE11 不用这样设置就已经直接竖直方向居中了,如果这样设置的话，反倒是位于偏下的位置了。这是什么原因？

qq_vibecisco_0

2016-04-28

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

关注问题我要回答

707

操作

收起

4 回答

qq_vibecisco_0 提问者
2016-04-29

我终于找到原因了：

*{
    margin:0；
    padding:0;
    font-size: 12px;
}

这里第一个“margin:0；”的“分号”我用的是中文输入法状态下的，改成英文输入法下的分号就行了。就是因为这里的一个标点，折腾了好久。

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

收起回答

qq_vibecisco_0 提问者
2016-04-29

*{
    margin:0；
    padding:0;
    font-size: 12px;
}
body{
    background-color: #F5F5F5;
}

/*顶部区*/
.top{
    width:100%;
    height:27px;
    background:url(../images/top_bg.jpg) repeat-x;
    }

    .top_content{
        width: 1000px;
        margin: 0 auto;
        line-height: 27px; /*垂直居中，但是现实效果有问题，有问题，没有垂直居中 而是偏下了*/
    }

    .top_content li{
        float:right;
        list-style-image: url(../images/arrow.jpg);
        width:70px;
    }

    .top_content a:link, .top_content a:visited{
        color:#8E8E8E;
        text-decoration: none;
    }
    .top_content a:hover, .top_content a:active{
        color:#C00;
        text-decoration: none;
    }