如何使Bootstrap徽章垂直居中对齐？

Question

这是 jsfiddle。 https://jsfiddle.net/8mfr1x79/1/

<div class="container">
    <div class="list-group">
        <a class="lis-group-item" href="#">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. <span class="badge badge-default pull-right">A long badge</span>
        </a>
    </div>
</div>

有没有简单的方法使左侧“a”元素的整个文本向左略微调整，以便徽章在垂直居中对齐？

我可以给左侧内容固定宽度，但我担心所有设备尺寸。

提前感谢。

- Rehmat

---

可能需要改变结构或大量重写现有的CSS框架，才能实现。而且链接不应该那么长。 - Paulie_D

Answer 1

弹性盒子可以做到这一点。

a.list-group-item {
  display: flex;
  align-items: center;
}
a .text {
  flex: 1;
}
a .badge {
  flex: 0 0 auto;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="list-group">
    <a class="list-group-item" href="#">
      <span class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. </span><span class="badge badge-default">A long badge</span>
    </a>
  </div>
</div>

<div class="container">
  <div class="list-group">
    <a class="list-group-item" href="#">
      <span class="text">Lorem ipsum dolor </span><span class="badge badge-default">A long badge</span>
    </a>
  </div>
</div>

- Paulie_D

---

抱歉，我在这方面遇到了问题，即使我使用了pull-right，如果文本不是完整的一行，徽章仍然会出现在左侧。 - Rehmat

更新了答案...我忘记在第一个span上加上flex:1。 - Paulie_D

Answer 2

我会使用表格单元格，并取消浮动。 https://jsfiddle.net/8mfr1x79/4/

<div class="container">
    <div class="list-group">
        <a class="lis-group-item table" href="#">
        <span class="tableCell">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus. 
        </span>
        <span class="tableCell">
          <span class="badge badge-default">A long badge</span>
        </span>
        </a>
    </div>
</div>

Css

.table{
  display: table;
}

.tableCell{
  display: table-cell;
  vertical-align: middle;
}

- Mike Mellor

---

类.table已经被Bootstrap使用，可能会带来一些问题。虽然这可能不是一个优美的解决方案，但它很简单。 - AlexG

抱歉，我不是常规的Bootstrap用户，但你可以随意为你的表格类命名。 - Mike Mellor

现在先用“table”就可以了，直到有人发布更好的解决方案。非常感谢Mike。我肯定不会使用“table”作为类名以避免冲突。 - Rehmat

Answer 3

我误解了你的问题，请稍等。

将徽章与文本位置交换，文本将围绕其周围流动。

JSFiddle

<div class="container">
    <div class="list-group">
        <a class="lis-group-item" href="#">
            <span class="badge badge-default pull-right">A long badge</span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam tristique erat ac nisi finibus, tempor commodo turpis dictum. Proin tempor neque a ullamcorper maximus.
        </a>
    </div>
</div>

注意：这仅适用于徽章使用了.pull-right/float: right;的情况。

- AlexG

---

非常感谢。它有效了，但在我的Chrome中仍不是完美的中心。有什么办法可以让它垂直居中吗？ - Rehmat

我实际上误解了你的问题，要使其垂直居中，您需要将其绝对定位，这可能会有些棘手。 - AlexG