中心<span>在两个<button>的</button> </span>之间

Question

我正在使用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无济于事。另外，为了提供一些额外的上下文，它位于caption的{​​{1}} div中。

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

Answer 1

它是bootstrap，只需text-center div上的house-container和pull-left上的btn-success。

JSFiddle

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

JSFiddle

当然，请不要按照示例进行操作，也不要将margin-top设置为整个.badge课程。

Answer 2

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

试试这个：

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

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