老师，想问下portfolio区导航项水平居中显示的问题
我的做法是每个导航项用<a>标签写，转为块级元素，设置了高度，没有设置宽度（因为看到宽度要随着里面的文字长度变化，所以只设置了padding），然后把它们左浮动，之后我想到的就只能用包裹它们的盒子的margin-left来设置水平居中了，但觉得方法不太好。
老师，这块有好的方法吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>NEXT</title>
<link href="css/homework.css" rel="stylesheet">
</head>
<body>
<header>
<div class="container">
<a href="NEXT.html"><img src="img/logo.jpg"></a>
<nav>
<a href="#">HOME</a>
<a href="#">PORTFOLIO</a>
<a href="#">TEAM</a>
<a href="#">CONTACT US</a>
</nav>
</div>
</header>
<section class="banner">
<img src="img/banner.jpg">
<div class="up">Welcome to Website</div>
<div class="bottom">Lorem ipsum dolor sit amet,consectetur adipisicing elit</div>
</section>
<section class="portfolio">
<div class="text1">P o r t f o l i o</div>
<div class="text2">Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmodtempor incididunt ut labore et<br>dolore magna aliqua.Ut enim ad minim veniam</div>
<div class="items">
<a href="#">ALL</a>
<a href="#">WEB</a>
<a href="#">SOFTWARE</a>
<a href="#">WORKS</a>
<a href="#">BRANDS</a>
</div>
<img src="img/portfolio-nav-img.jpg">
</section>
</body>
</html>
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
header{
width:100%;
height:100px;
background:#2e2e2e;
}
header .container{
width:1200px;
margin:0 auto;
}
header .container > a{
display:block;
float:left;
width:140px;
height:30px;
margin-top:35px;
margin-left:24px;
}
header .container nav{
float:right;
}
header .container nav a{
display:block;
color:#fff;
font-size:16px;
height:100px;
width:110px;
line-height:100px;
float:left;
text-align:center;
}
header .container nav a:hover{
background:red;
}
.banner{
height:612px;
width:100%;
position:relative;
}
.banner img{
width:100%;
}
.banner .up{
width:674px;
height:100px;
position:absolute;
top:246px;
left:303px;
color:#fff;
font-size:70px;
}
.banner .bottom{
position:absolute;
top:336px;
left:435px;
width:410px;
height:22px;
color:#fff;
}
.portfolio{
text-align:center;
}
.portfolio .text1{
color:#f46208;
font-size:48px;
margin-top:80px;
}
.portfolio .text2{
text-align:center;
font-size:14px;
margin-top:20px;
}
.portfolio .items{
margin:46px 0 36px 435px;
overflow:hidden;
}
.portfolio .items a{
display:block;
height:26px;
border:1px solid #f46208;
float:left;
padding:3px 10px;
line-height:26px;
font-size:15px;
color:#f46208;
margin-right:16px;
}
.portfolio img{
width:100%;
}
.portfolio .items a:hover{
background:#f46208;
color:#fff;
}
正在回答
1、banner区域的图片太高了，超出了banner区域的高度，遮住了下面的内容，建议将图片高度设置为banner的高度即可：
2、portfolio区域下面5个导航块，可以设置固定宽度，使用margin:0 auto;居中显示，每一个导航可以设置左右的margin值，否则只设置一边的margin值，居中显示还需要去除最边上的margin值，参考：
自己完善测试下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星