Litsgroupitem with vertically centered text and button on the right

Question

I have a list-group where I want to show some elements which can be added dynamically through another component inside the page. What I need is button where the user can remove such element. The button should be aligned right hand side.

So this is what I came up with by now:

<ul class="list-group">
    <li class="list-group-item">
        <span>Item to delete</span>
        <button type="button" class="btn btn-outline-danger pull-righ">
            <i class="fa fa-times "/>
        </button>
    </li>
</ul>

Problem is, that the text is not vertically centered, the button instead is.

If I remove the button's pull-right class, the button is for sure not aligned anymore, but the text is vertically centered to the button.

How can I have both? Vertically centered text with the button placed on the right side?

Already tried putting the button inside its own span element and applying classes or element-styles, eg vertical-align , different display or line-height . But as far as I know, most of them do need a hight set for the parent element (which I don't have). On the other hand it seems to do what I want as long as there is no pull-right for the button.

Answer 1

Here is code, i used display: flex and to align the content, is used justify-content: space-between;

 li.list-group-item { display: flex; justify-content: space-between; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="list-group"> <li class="list-group-item"> <span>Item to delete</span> <button type="button" class="btn btn-outline-danger pull-righ"> <i class="fa fa-times "></i> </button> </li> </ul> 

Answer 2

You could use flexbox for this. align-items will do what you need.

 .list-group-item { display: flex !important; justify-content: space-between; align-items: center; } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <ul class="list-group"> <li class="list-group-item"> <span>Item to delete</span> <button type="button" class="btn btn-outline-danger pull-right"> <i class="fa fa-times"></i> </button> </li> </ul> 

Answer 3

You can use transform: translateY(37%) with Bootstrap.

 li span { display: inline-block; transform: translateY(37%); } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <ul class="list-group"> <li class="list-group-item clearfix"> <span>Item to delete</span> <button type="button" class="btn btn-outline-danger pull-right"> <i class="fa fa-times"></i> </button> </li> </ul> 

You can also check this Fiddle.

Note: It's better to go with flex css for your requirement.