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”元素的整个文字朝左边调整，以便徽章在中心垂直对齐？

我可以为左边的内容指定固定宽度，但我担心所有设备尺寸。

提前致谢。

Answer 1

Flexbox可以做到这一点

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>

Answer 2

误解了你的问题。坚持下去。

使用您的文字切换徽章的位置，文本将围绕它流动。

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;

Answer 3

我可能会使用表格单元并摆脱浮动。

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;
}

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

3 个答案:

JSFiddle