带有垂直居中文本和右侧按钮的 Litsgroupitem答案

【问题标题】：Litsgroupitem with vertically centered text and button on the right带有垂直居中文本和右侧按钮的 Litsgroupitem
【发布时间】：2017-09-20 21:08:22
【问题描述】：

我有一个列表组，我想在其中显示一些可以通过页面内的另一个组件动态添加的元素。我需要的是用户可以删除此类元素的按钮。按钮应在右侧对齐。

所以这就是我现在想出的：

<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。但据我所知，它们中的大多数确实需要为父元素设置一个高度（我没有）。另一方面，只要按钮没有pull-right，它似乎就可以做我想做的事。

【问题讨论】：

尝试使用 flex，我认为这很简单

标签： html css twitter-bootstrap

【解决方案1】：

这里是代码，我使用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>

【讨论】：

【解决方案2】：

您可以为此使用 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>

【讨论】：

【解决方案3】：

您可以在 Bootstrap 中使用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。

【讨论】：