Bootstrap 4：按鈕將文字與圖標對齊

所以我正在製作一個左邊帶有圖標的按鈕。並且排列是混亂的。我的文字不與圖標中間對齊，我不知道如何解決這個問題。行高似乎沒有做任何事情。或者觸摸填充/邊距，因爲我已將填充添加到圖標區域，因爲我需要它比文本背景更暗。Bootstrap 4：按鈕將文字與圖標對齊

這裏的圖片預覽：

有沒有一種辦法可以解決對齊？或者有沒有辦法通過Bootstrap 4輕鬆實現這種類型的按鈕？

這裏是我的代碼：

.btn-primary { 
 
    background-color: #3382c7; 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    span { 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 
    } 
 
    i { 
 
     font-size: 20px; 
 
     background-color: #306fa5; 
 
     padding: 15px 20px; 
 
    } 
 
    }

<a href="#" class="btn btn-primary border-0 rounded-0 p-0"> 
 
    <i class="fa fa-play" aria-hidden="true"></i> 
 
    <span>Click here to Play</span> 
 
</a>

來源

2017-05-03 Retros

應設置了''標籤的填充，使文本放在中間，甚至如果ü把它像'填充：汽車;'是可以工作 –

使用align-middle類的跨度和圖標..

<div class="container"> 
    <a href="#" class="btn btn-primary border-0 rounded-0 p-0"> 
     <i class="fa fa-play align-middle" aria-hidden="true"></i> 
     <span class="align-middle">Click here to Play</span> 
    </a> 
</div>

http://www.codeply.com/go/xuiy1703Dv

來源

2017-05-03 12:09:21 ZimSystem

這個工作完美！ Zim，一如既往，你是一個拯救生命的人！謝謝！ – Retros

不客氣！ – ZimSystem

試試這個！如果它不工作嘗試給垂直對齊：中間;財產的圖標了。

.btn-primary { 
 
    background-color: #3382c7; 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
    span { 
 
     padding-left: 25px; 
 
     padding-right: 25px; 
 
    } 
 
    i { 
 
     font-size: 20px; 
 
     background-color: #306fa5; 
 
     padding: 15px 20px; 
 
     vertical-align:middle; 
 
    } 
 
    }

<a href="#" class="btn btn-primary border-0 rounded-0 p-0"> 
 
    <i class="fa fa-play" aria-hidden="true"></i> 
 
    <span>Click here to Play</span> 
 
</a>

來源

2017-05-03 12:04:15

如果你讓他們display: inline-block和vertical-align: middle它應該爲你工作

.btn-primary { 
 
    background-color: #3382c7; 
 
    display: inline-block; 
 
    font-size: 10px; 
 
    font-weight: bold; 
 
    text-transform: uppercase; 
 
} 
 

 
.btn-primary span { 
 
    display: inline-block; 
 
    padding-left: 25px; 
 
    padding-right: 25px; 
 
    vertical-align: middle; 
 
} 
 

 
.btn-primary i { 
 
    font-size: 20px; 
 
    display: inline-block; 
 
    background-color: #306fa5; 
 
    padding: 15px 20px; 
 
    vertical-align: middle; 
 
}

<a href="#" class="btn btn-primary border-0 rounded-0 p-0"> 
 
    <i class="fa fa-play" aria-hidden="true"></i> 
 
    <span>Click here to Play</span> 
 
</a>

來源

2017-05-03 12:14:33 Paul

Bootstrap 4：按鈕將文字與圖標對齊

回答

相關問題