作业导航居中与适应窗口大小问题

想要设置     .list   中像 li  中   text-align: center;   实现5个li  始终在.list的中央。

为什么text-align: center;在li标签中好用而在.list中不好用，如果想要实现应该怎么设置呢？

.portfolio>div{
	width: 100%;
}
.list{
	display: table;
	margin: 0 auto;
	position: relative;
	width: 600px;
	height: 30px;
	background-color: #FA0E0E;
	text-align: center;
}
.list>li{
	font-size: 14px;
	line-height: 20px;
	display: block;
	color: #f46208;
	width: 100px;
	text-align: center;
	border: 1px solid #f46208;
}
.l1{
	position: absolute;
	margin-left: 10px;
}
.l2{
	position: absolute;
	margin-left: 130px;
}
.l3{
	position: absolute;
	margin-left: 260px;
}
.l4{
	position: absolute;
	margin-left: 390px;
}
.l5{
	position: absolute;
	margin-left: 520px;
}

<section class="portfolio">
		<div>
			<h1>protfolio</h1>
			<dt>that is the first text</dt>
			<list class="list">
				<li class="l1">导航一</li>
				<li class="l2">导航二</li>
				<li class="l3">导航三</li>
				<li class="l4">导航四</li>
				<li class="l5">导航五</li>
			</list>
			<img src="img/portfolio-nav-img.jpg">
		</div>
	</section>