Bootstrap button icon not centered

user_5607409 0
Viewed 3075

I am using the boostrap social button for google but the google icon is not vertically centered.

How do i get the "G" to be centered vertically.

body {
  background-color: #E8ECEF;
}

.centered {
    padding-top: 200px;
    text-align: center;
}

.secret-text {
  text-align: center;
  font-size: 2rem;
  color: #fff;
  background-color: #000;
}
<!-- just tried this part out also didn't change the G-->
.btn-google{
    display: flex;
   align-items: center;
   justify-content: center;
}
<div class="container mt-5">
  <h1>Login</h1>

  <div class="row">
    <div class="col-sm-8">
      <div class="card">
        <div class="card-body">

          <!-- Makes POST request to /login route -->
          <form action="/login" method="POST">
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" name="username">
            </div>
            <div class="form-group">
              <label for="password">Password</label>
              <input type="password" class="form-control" name="password">
            </div>
            <button type="submit" class="btn btn-dark">Login</button>
          </form>

        </div>
      </div>
    </div>

    <div class="col-sm-4">
      <div class="card">
        <div class="card-body">
          <a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
            <i class="fab fa-google"></i>
            Sign In with Google
          </a>
        </div>
      </div>
    </div>

  </div>
</div>

Added the full code for my login page minus the header/footer and included css as well as new image

I am using the bootstrap social css as well

Picture of the problem

bootstrap-4 css html
5 Answers

All you need to do is use some flexbox magic. 

.btn-google {
  /* Since your button is a block button, otherwise use inline-flex */
  display: flex;
  align-items: center;
  justify-content: center;
}

Try that and let me know if it works fine!

user_12084690 
 .className{
  vertical-align: baseline;
}

try this class

user_86083440

You can use the flexbox to align the items horizontally and vertically center. If you want to adjust your icon relative to your text, you can use transform property.

Here is code.

HTML


 <div class="card">
        <div class="card-body">
          <a class="btn btn-block btn-social btn-google" href="/auth/google" role="button">
            <i class="fab fa-google"></i>
            Sign In with Google
          </a>
        </div>
      </div>
    </div>



.card{
  background-color:#DD4B39;
  color:#fff;
  width:300px;
  margin:5px auto;
}
.card a{
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
}
.card a i{
  margin-right:5px;
  transform:translateY(2px)
}
user_128634390

All you have to do is adding a text-center class to your icon; If that doesn't work too, add justify-content-center class to the div that contains col-sm-4.

user_122754780

This will center it CENTERING VERTICALLY

  min-height: 10em;
  display: table-cell;
  vertical-align: middle

Let me know if this works for you :)

user_63926960
Related