Question

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

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

<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，它似乎就可以做我想要的。

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

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

Answer 3

您可以将transform: translateY(37%)与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>

您还可以查看此Fiddle.

注意：最好根据您的要求使用flex css。

具有垂直居中文本的Litsgroupitem和右侧的按钮

3 个答案: