qq_vibecisco_0
2016-04-28 20:44
老师说了好几遍的一个技巧:把line-height 与div的高度设置为一致,盒子里的内容就会在竖直方向居中。但是我发现这个技巧没用。我试了Chrome, Firefox, IE11 不用这样设置就已经直接竖直方向居中了,如果这样设置的话,反倒是位于偏下的位置了。这是什么原因?
我终于找到原因了:
*{ margin:0; padding:0; font-size: 12px; }
这里第一个“margin:0;”的“分号”我用的是中文输入法状态下的,改成英文输入法下的分号就行了。就是因为这里的一个标点,折腾了好久。
*{ 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; }
一步一步按老师的代码敲进去的,效果就是不一样啊,没有垂直居中,而是偏下了。
不设置不会垂直居中的,最好把代码和网页效果图贴上来。
企业网站综合布局实战
157042 学习 · 1984 问题
相似问题