请老师检查一下,为什么页面无法居中?
*{
margin: 0;
padding: 0;
}
a:link,a:visited{
color: #666;
}
body{
font-family: "微软雅黑";
font-size: 22px;
color: #666;
text-align: center;
}
.box{
margin: 0 auto;
}
.top{
width: 1200px;
height: 70px;
}
.nav{
line-height: 70px;
}
.top .nav li.active{
background-color: #fc0;
}
.nav li{
width: 300px;
height: 70px;
float: left;
list-style: none;
text-align: center;
}
.nav li a{
text-decoration: none;
font-weight: bolder;
display: block;
}
.main{
width: 1200px;
height: 460px;
overflow: hidden;
}
.banner{
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
}
.banner-slider{
width: 1200px;
height: 460px;
background-repeat: no-repeat;
position: absolute;
display: none;
}
.solider-active{
display: block;
}
.slider1{
background-image: url("../img/1.jpg");
}
.slider2{
background-image: url("../img/3.jpg");
}
.slider3{
background-image: url("../img/4.jpg");
}
.slider4{
background-image: url("../img/5.jpg");
}
正在回答
同学你好!没有居中的原因可能是你设置了margin:0 auto;而没有设置固定的宽高。
因为看不到你html的代码,这里无法准确的查看你的问题所在。
可以给几个居中显示的思路:
(1) 给标题tab和图片外面包裹一个大的div,设置固定宽高,然后使用margin:0 auto;来居中显示
(2) 给父级设置相对定位,给里面的子级设置绝对定位,使用top:0;bottom:0;lefet:0;right:0;margin:auto;来设置居中。
如果还是居中不了,可以将你的代码粘贴过来,这边给你寻找问题所在。
如果解决了你的疑惑,望采纳, 祝学习愉快~~
- 参与学习 人
- 提交作业 11218 份
- 解答问题 36713 个
从一个不会编程的小白到一个老司机是需要过程的,首先得入门,学习基础知识,然后才能进阶,最后再到精通,本专题是你走进前端世界的不二选择!
了解课程
恭喜解决一个难题,获得1积分~
来为老师/同学的回答评分吧
0 星