我的图标为什么不能居中显示

源自：1-3 汽泡特效(Font Awesome字体库使用)

我的图标为什么不能居中显示

<!DOCTYPE html>
</html>
<html>
<head>
	<title>
		css导航
	</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width" initial-scale="1" >
	<link rel="stylesheet" type="text/css" href="css/style.css">
	<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
</head>
<body>
	<div class="nav">
		<ul>
			<li><a class="tooltip tooltip-effect-1" href="#">Home<span class="tooltip-content"><i class="icon-home"></i></span></a></li>
			<li><a class="tooltip tooltip-effect-2" href="#">About me<span class="tooltip-content"><i class="icon-user"></i></span></a></li>
			<li><a class="tooltip tooltip-effect-3" href="#">Photography<span class="tooltip-content"><i class="icon-camera-retro"></i></span></a></li>
			<li><a class="tooltip tooltip-effect-4" href="#">Work<span class="tooltip-content"><i class="icon-briefcase"></i></span></a></li>
			<li><a class="tooltip tooltip-effect-5" href="#">Contact<span class="tooltip-content"><i class="icon-envelope"></i></span></a></li>
		</ul>
	</div>
<body>
</html>

html{
	width:100%;
	height:100%;
	text-size-adjust:none;
}
body{
	margin:0;
	padding:0;
	width: 100%;
	height: 100%;
	background: #47c9af;
	color: #74777b;
	font-weight: 300;
	font-size: 1.5em;
	font-family: "Raleway","Arail";
}
ul{
	list-style: none;/*去掉列表符号*/
	margin: 0;
	padding: 0;
}
a:link,a:visited,a:focus{
	text-decoration: none;
	outline: none;
}
*,*:before,*:after{
	box-sizing: border-box;
}
*:before,*:after{
	display: block;
	content: "";
}
*:after{
	clear: both;
}
.nav{
	width: 800px;
	height: 300px;
	margin: 200px auto;
}
.nav li{
	display: inline-block;
	margin: 0 30px;
}
.tooltip{
	display: inline-block;
	position: relative;
	font-weight: 700;
	color: rgba(0,0,0,0.5);
}
.tooltip-content{
	position: absolute;
	z-index: 9999;
	bottom: 100%;
	width: 80px;
	height: 80px;
	border-radius: 100%;
	background: snow;
	left: 50%;
	margin-left:-40px;
	margin-bottom:20px; 
	text-align:center;
	padding-top:-25px; 
	color: #47c9af;
}
.tooltip-content:after{
	height: 20px;
	width: 30px;
	content: "";
	display: block;
	background: url(tooltip1.svg) no-repeat center center;
	position: absolute;
	top:100%;
	left: 50%;
	margin:-8px 0 0-15px;
}

已经设置了text-align：center了

提问者：梅影西风 2016-04-23 16:54

我的图标为什么不能居中显示

个回答