在两个 <button> 之间居中 <span>答案

【问题标题】：Center <span> between two <button>'s在两个 <button> 之间居中 <span>
【发布时间】：2014-08-09 09:10:00
【问题描述】：

我正在使用 bootstrap v3 并尝试将 <span class="badge">1</span> 居中在两个按钮之间，其中一个使用 pull-right 类。

确切的 html 如下所示：

<button type="button" class="btn btn-success">Decient</button>
<span class="badge">10</span>
<button type="button" class="pull-right btn btn-danger">Garbage</button>

但是这会导致以下结果：

我想让 10 居中，但没有成功。我试过pagination-centered、text-center和自定义CSS都无济于事。另外为了提供一些额外的上下文，这是在 thumbnail 的 caption div 中。

以下提供了我的情况的一个基本场景：http://jsfiddle.net/vvA78/1/

【问题讨论】：

我们能得到相关的css吗
我只是用3.1.1/css/bootstrap.min.css
为什么人们如此执着于不帮助自己.. 你想解决这个问题吗？然后给我们信息。我们如何知道 CSS 的外观以及您尝试过的内容？ 自定义 CSS 是什么意思，你试过text-align:center;，我们不知道
@mfunkyside 是的，我也尝试过 text-align:center。我确实提供了我当前使用的确切 CSS，并且还提到我尝试过以分页为中心和以文本为中心。我希望这足以让有人帮助我。
@Jon 这是引导程序，你不应该要求他从框架中发布 CSS。

标签： html css twitter-bootstrap twitter-bootstrap-3 centering

【解决方案1】：

.badge 可能是一个inline 元素。如果将其设为 inline-block 或 block 元素，则可以将其相对于父元素居中。

试试这个：

.badge { display: inline-block; margin: 0 auto; width: 40px; }

如果它不起作用，我需要一个小提琴或一个链接。

【讨论】：

【解决方案2】：

它是bootstrap，只需在house-container div 上使用text-center，在btn-success 上使用pull-left。

JSFiddle

要垂直居中，只需添加margin-top。

JSFiddle

当然不要照例，不要将margin-top设置为整个.badge类。

【讨论】：