rsharpy rsharpy - 3 months ago 26
CSS Question

How to make bootstrap badge vertically center aligned?

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

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