竖直方向居中

来源:3-5 企业网站制作之导航部分制作(二)

qq_vibecisco_0

2016-04-28 20:44

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

写回答 关注

4回答

  • qq_vibecisco_0
    2016-04-29 12:04:35

    我终于找到原因了:

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

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

  • qq_vibecisco_0
    2016-04-29 11:46:46
    *{
        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;
        }


  • qq_vibecisco_0
    2016-04-29 11:45:02

    一步一步按老师的代码敲进去的,效果就是不一样啊,没有垂直居中,而是偏下了。

    http://img.mukewang.com/5722d89f000177ef10480193.jpg

  • mowan
    2016-04-28 23:24:27

    不设置不会垂直居中的,最好把代码和网页效果图贴上来。

企业网站综合布局实战

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

157042 学习 · 1984 问题

查看课程

相似问题