Litsgroupitem垂直居中的文本和按钮在右边

我有一个列表组，我想显示一些可以通过页面内的另一个组件动态添加的元素。我需要的是按钮，用户可以删除这样的元素。该按钮应该右对齐。Litsgroupitem垂直居中的文本和按钮在右边

原来这就是我想出现在：

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

问题是，该文本不是垂直居中，按键反而是。

如果我删除按钮的pull-right类，按钮是肯定不再一致，但文本垂直居中的按钮。

我怎样才能兼得？垂直居中的文本与按钮放置在右侧？

已尝试将按钮放在其自己的span元素中，并应用类或元素样式，例如， vertical-align，不同的display或line-height。但据我所知，他们中的大多数确实需要为父元素设置一个hight（我没有）。另一方面，它似乎做我想要的，只要没有pull-right按钮。

来源

2017-09-20 KingKerosin

尝试使用flex，这就是我认为的简单方法 –

这里是代码，我用display: flex和对齐的内容，是用来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>

来源

2017-09-20 12:58:08

您可以使用Flexbox的这一点。 align-items会做你需要的。

.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>

来源

2017-09-20 12:58:16 sol

您可以使用transform: translateY(37%)与引导。

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>

您还可以检查此Fiddle.

注：这是更好地去与flex css为您的要求。

来源

2017-09-20 13:08:22 kravisingh

Litsgroupitem垂直居中的文本和按钮在右边

回答

相关问题