Css 如何在div内水平居中放置跨度元素

我正试图将“查看网站”和“查看项目”这两个链接放在周围分区的中心位置。有人能指出我需要做些什么来实现这一点吗

JS小提琴：

HTML

---

一种选择是给

跨度提供一些棘手的处理方法。如果设置了示教范围的宽度，则可以使用

margin: 0 auto;

使它们居中，但它们最终会在不同的线上。我建议对你的结构尝试一种不同的方法

这是我头顶上的JSFIDLE：

编辑：

Adrift的答案是最简单的解决方案：）
我假设您希望将它们集中在一条线上，而不是基于您的小提琴在两条单独的线上。如果是这种情况，请尝试以下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 auto，使链接周围的跨度居中。最后，我向跨度添加了一个静态宽度。这会将链接集中在红色分区内的一行上。
另一个选项是显示span
显示：表格并通过
边距将其居中：0自动

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


短文本

这是长文本
将
内联块
应用于要居中的元素，并将
文本对齐：居中
应用于父块，我就成功了

甚至可以在标签上工作。
只有css div可以集中内容

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

Related：这里有两种简单的方法可以使div中的元素居中，垂直、水平或两者都居中（纯CSS）：这对我来说是一个中等复杂的主题，我需要稍微修改一下。进一步向上到JSFIDLE的链接非常棒，可以让我进行测试。我编辑了此条目，将“溢出：隐藏”更改为“溢出：隐藏”；看起来是一个非常干净的解决方案。请参阅下面的Ahmed Bahty答案，style=“text align:center”，它更简洁。看到同一问题的不同解决方案总是很有趣的。仅在最近几年内更新的浏览器上受支持。国际海事组织最佳解决方案
 div { background:red;
      overflow:hidden;
}
span { display:block;
       margin:0 auto;
       width:200px;
}
span a { padding:5px 10px;
         color:#fff;
         background:#222;
}

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

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

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