如何在div内水平居中span元素

我试图把两个链接的“查看网站”和“查看项目”放在周围的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 } 

Answer 1

一种select是给<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/

Answer 2

另一个选项是给出跨度display:table; 并通过margin:0 auto;居中margin:0 auto;

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

Answer 3

将“内嵌块”应用于要居中的元素，并应用文本alignment：中心到父块为我做了诀窍。

即使在<span>标签上也是如此。

Answer 4

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

Answer 5

跨度可以有点棘手来处理。 如果您设置示教跨度的宽度，您可以使用

 margin: 0 auto; 

集中他们，但他们然后结束在不同的线。 我会build议尝试不同的方法来你的结构。

jsfiddle： jsfiddle ： jsfiddle ： jsfiddle ： jsfiddle ： jsfiddle

编辑：

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

Answer 6

我假设你想要将它们集中在一条线上，而不是基于你的小提琴在两条单独的线上。 如果是这种情况，请尝试下面的CSS：

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

我删除了浮动，因为你想要居中，然后通过添加margin：0自动到他们的中心周围的链接跨度。 最后，我在span上添加了一个静态宽度。 这将链接集中在红色的div内的一行上。