CODEWITHSUNDEEP
csstwitter-bootstrapbootstrap-4
Retros
Retros

Reputation: 3621

Bootstrap 4: Vertical align image in a circle button

I have a circle button that needs to have a plus image in the center of it. The thing is, I can't seem to vertical align that image without resorting to messing with margins.

Is there an easier, Bootstrap-y way of doing this?

Here's my code:

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

Upvotes: 1

Views: 9740

Answers (3)

Mohit
Mohit

Reputation: 1

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

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362750

One way is to make the <a..></a> display:flex using the included d-flex class.

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

The use the appropriate util classes to center: justify-content-center align-items-center

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

Upvotes: 2

Gustaf Gun&#233;r
Gustaf Gun&#233;r

Reputation: 2267

Is this what you're trying to achieve? I vertically centered the <a> containing the <img> with

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

Bootstrap's border-radius seemed to override yours, so I added !important to it.

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

Upvotes: 1

Related Questions