Html+CSS中设置class left中的a标签text-align:center无效，什么原因？
问题描述：
<!DOCTYPE html>
<html style="background-image: url(./img/bg.png);">
<head>
<meta charset="utf-8" />
<title>This is my first</title>
<style>
* {
margin: 0;
font-family: "微软雅黑";
transition:0.5s;
-webkit-font-smoothing: antialiased;
}
.header {
width: 100%;
height: 70px;
background-color: white;
position: fixed;
top: 0;
box-shadow:3px 1px 2px darkgrey;
}
.header:hover {
box-shadow:3px 1px 2px #000;
}
.header a {
line-height: 70px;
margin: 85px;
color: black;
text-decoration: none;
padding: 15px;
font-size: 16px;
text-shadow: 0 1px 1px #fff;
}
.header a:hover {
background-color: black;
color: white;
}
.left {
width: 5px;
height: 700px;
background-color: white;
position: fixed;
left: 0;
overflow: auto;
}
.left:hover {
width: 200px;
box-shadow:3px 1px 2px darkgrey;
}
.left a {
text-align: center;
}
.main_left {
margin: 80px;
background-color: white;
width: 70%;
height: 700px;
border-top: aqua;
}
.main_right {
margin: 50px;
background-color: white;
}
</style>
</head>
<body>
<div class="header">
<a href="#">点击链接</a>
<a href="#">点击链接</a>
<a href="#">点击链接</a>
<a href="#">点击链接</a>
<a href="#">点击链接</a>
</div>
<div class="left">
<a> Hello </a>
</div>
<div class="main_left">
</div>
</body>
</html>
之前试过了margin:auto;
也试过
display:inline-block;
text-align: center;
都无效，有没有解决办法？
答
如果想要上下居中，在.left添加：
line-height: 700px;
如果想要左右居中，在.left添加：
text-align: center;
如果想要上下左右居中：在.left添加：
text-align: center;
line-height: 700px;
答
因为a是行内元素，不能直接设置text-align: center;
要给它的父元素设置。