如何使自舉徽章垂直居中對齊？

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