关于lne-height和text-align的疑问

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="js/js.js"></script>
</head>
<body>
<div class="main">
<!-- 导航 -->
<div class="nav">
<div class="nav-item actived">
<a href="javascript:void(0)">
<span>首页</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>点击看看</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>会自动的</span>
</a>
</div>
<div class="nav-item">
<a href="javascript:void(0)">
<span>我的网站</span>
</a>
</div>
</div>
<!-- 轮播图 -->
<div class="slide-pics">
<div class="slide-pic0">
<a href=""></a>
</div>
<div class="slide-pic1">
<a href=""></a>
</div>
<div class="slide-pic2">
<a href=""></a>
</div>
<div class="slide-pic3">
<a href=""></a>
</div>
</div>
</div>
</body>
</html>

*{
	padding: 0;
	margin: 0;
	font-family: "Microsoft YaHei";
}
.main{
	margin: 0 auto;
	height: 520px;
	width: 1200px;
}
a{
	text-decoration: none;
}

/*导航*/
.nav{
	height: 60px;
	width: 1200px;
	font-size: 22px;
}
.nav>.nav-item{
	float: left;
	width: 25%;
	height: 60px;
	line-height: 60px;
	text-align: center;
}
.nav-item>a{
	display: inline-block;
	width: 100%;
	/*height: 100%;*/
	color: #666;
}
.nav>.actived{
	background: #FFCC00;
	border-radius: 5px;
}


/*轮播图*/
.slide-pics{
	height: 460px;
	width: 1200px;
}
.slide-pics>.slide-pic0{
	height: 460px;
	width: 1200px;
	background: url(../img/1.jpg) no-repeat;
}
.slide-pics>.slide-pic1{

}
.slide-pics>.slide-pic2{

}
.slide-pics>.slide-pic3{

}

这个作业还没写完，但完成过程中关于line-height和text-align有点疑问。

类为nav-item的div元素添加了样式line-height，其值等于其height。这样其内部的a元素的高度为什么就自动变为作为a元素的父元素的div的高度？而且文字垂直居中了？

类为nav-item的div元素同样添加了样式text-align，其值为center。这样为什么它的内部元素，文字都水平居中了？

慕容124385 2018-09-20

源自：项目：JS实现轮播特效 6-2 作业题