CSS中文本居中问题

Question

CSS文本水平居中问题：

<div class="xtx-copyright">
        <div class="container">
            <p>
                <a href="#">关于我们</a> 
                <span>|</span>
                <a href="#">帮助中心</a> 
                <span>|</span>
                <a href="#">售后服务</a> 
                <span>|</span>
                <a href="#">配送与验收</a> 
                <span>|</span>
                <a href="#">商务合作</a> 
                <span>|</span>
                <a href="#">搜索推荐</a> 
                <span>|</span>
                <a href="#">友情链接</a>
            </p>
            <p></p>
        </div>
    </div>

.xtx-copyright {
    background-color: #333;
    height: 168px;
}
.xtx-copyright .container{
    height: 168px;
    width: 1240px;
    margin: 0 auto;
    color: #999;
    font-size: 14px;
    text-align: center;
}

.xtx-copyright .container a {
    color: #999;
    text-decoration: none;
}

按照正常的逻辑文本应该已经水平居中了

Answer 1

.xtx-copyright {
  background-color: #333;
  height: 168px;
}

.xtx-copyright .container {
  height: 168px;
  width: 1240px;
  margin: 0 auto;
  color: #999;
  font-size: 14px;
  text-align: center;
}

.xtx-copyright .container a {
  color: #999;
  text-decoration: none;
  display: inline-block;
  vertical-align: middle;
}