                        課程
                    
                        /前端開發
                        
                            /CSS3
                        
                        /CSS3實現漂亮ToolTips效果

我的圖標為什么不能居中顯示

<!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了