How to make bootstrap badge vertically center aligned?

Question

Here is the 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>

Is there any easy way so that whole text of the "a" element on the left gets adjusted towards a little left so that the badge aligns vertically in center?

I can give fixed width to the content on left, but I am concerned about all device sizes.

Thanks in advance.

Answer 1

Flexbox could do that

 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

Missunderstood your question. Hold on.

Switch the position of the badge with your text, the text will flow around it.

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>

Note: this only works because of the badges .pull-right / float: right;

Answer 3

I'd probably use table-cells and get rid of the float.

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