Bootstrap 4：在圓形按鈕中垂直對齊圖像

我有一個圓形按鈕，需要在其中心有一個加號圖像。事情是，我似乎無法垂直對齊該圖像，而不訴諸邊際。Bootstrap 4：在圓形按鈕中垂直對齊圖像

有沒有更簡單的Bootstrap-y方法來做到這一點？

這裏是我的代碼：

.btn-circle { 
 
    background-color: blue; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
} 
 

 
/* the button is supposed to be a circle, but for some reason it's not showing up like that in this snippet */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<a class="btn btn-circle mr-3" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" height="20"></a>

來源

2017-07-08 Retros

的一種方法是使<a..></a>顯示：彎曲使用包括d-flex類。

<a class="btn btn-circle mr-3 d-flex justify-content-center align-items-center" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" class="" height="20"></a>

使用適當的UTIL類中心： justify-content-center align-items-center

https://www.codeply.com/go/BE0Jh6NqrL

來源

2017-07-08 10:56:54 ZimSystem

這就是它！謝謝，Zim！ – Retros

這是你想達到什麼樣的？我垂直居中的<a>包含<img>與

position: relative; 
top: 50%; 
-webkit-transform: translateY(-50%); 
-ms-transform: translateY(-50%); 
transform: translateY(-50%)

引導的border-radius似乎超越你，所以我加了!important它。

.btn-circle { 
 
    background-color: blue; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50% !important; 
 
} 
 
.btn-circle a{ 
 
    display: block; 
 
    width: 20px; 
 
    height: 20px; 
 
    position: relative; 
 
    top: 50%; 
 
    -webkit-transform: translateY(-50%); 
 
    -ms-transform: translateY(-50%); 
 
    transform: translateY(-50%); 
 
} 
 
.btn-circle img{ 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 

 
/* the button is supposed to be a circle, but for some reason it's not showing up like that in this snippet */

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<a class="btn btn-circle mr-3" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"><img src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg"></a>

來源

2017-07-08 10:31:27

.btn-circle { 
 
    background-color: blue; 
 
    height: 60px; 
 
    width: 60px; 
 
    border-radius: 50%; 
 
    display: flex; 
 
    align-items: center; 
 
    
 
    
 
}

<div class="container"> 
 
    <a class="btn btn-circle mr-3 d-flex justify-content-center align-items-center" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> 
 
     <img style="height: 30px;padding-left:15px;" src="https://res.cloudinary.com/dt9b7pad3/image/upload/v1499509391/58a2031e6af142ce619ba2a2_plus-symbol_y6vqca.svg" class="" height="20"> 
 
    </a> 
 
</div>

來源

2017-07-08 12:10:52 Mohit

Bootstrap 4：在圓形按鈕中垂直對齊圖像

回答

相關問題