如何在div中将居中元素水平居中

我试图将两个链接“查看网站”和“查看项目”置于周围div的中心。有人可以指出我需要做些什么才能使这项工作吗？

JS小提琴：http：//jsfiddle.net/F6R9C/

的HTML

<div>
  <span>
    <a href="#" target="_blank">Visit website</a>
    <a href="#">View project</a>
  </span>
</div>

的CSS

div { background:red;overflow:hidden }

span a {
    background:#222;
    color:#fff;
    display:block;
    float:left;
    margin:10px 10px 0 0;
    padding:5px 10px
}

一种选择是<a>显示，inline-block然后text-align: center;在包含块上应用（也删除浮点数）：

div { 
    background: red;
    overflow: hidden; 
    text-align: center;
}

span a {
    background: #222;
    color: #fff;
    display: inline-block;
    /* float:left;  remove */
    margin: 10px 10px 0 0;
    padding: 5px 10px
}

http://jsfiddle.net/Adrift/cePe3/

另一个选择是给跨度display:table;并通过margin:0 auto;

span {
display:table;
margin:0 auto;
}

<div style="text-align:center">
    <span>Short text</span><br />
    <span>This is long text</span>
</div>

应用于inline-block要居中的元素并应用text-align:center父块对我来说是成功的窍门。

甚至适用于<span>标签。

跨度可能会有些棘手。如果您设置示教范围的宽度，则可以使用

margin: 0 auto;

使它们居中，但最终它们会位于不同的行上。我建议尝试对您的结构使用其他方法。

这是我脑海中浮现的jsfiddle：jsFiddle

编辑：

Adrift的答案是最简单的解决方案:)

我假设您要根据小提琴将它们放在一行的中心，而不是在两条单独的行。如果是这种情况，请尝试以下CSS：

 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

我删除了float，因为您想将其居中，然后通过向它们添加margin：0 auto来使链接居中分布。最后，我为跨度添加了静态宽度。这会将链接集中在红色div的一行上。

只有css div可以使内容居中

div{
       display:table;
       margin:0 auto;
    }

http://jsfiddle.net/4q2r69te/1/