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垂直居中的文本和按鈕在右邊

回答

相關問題