CODEWITHSUNDEEP
htmlcssbootstrap-4
j doe
j doe

Reputation: 83

Bootstrap button icon not centered

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

Upvotes: 4

Views: 7995

Answers (5)

nourza
nourza

Reputation: 2321

This will center it CENTERING VERTICALLY

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

Let me know if this works for you :)

Upvotes: 0

Amir7
Amir7

Reputation: 42

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.

Upvotes: 0

Praveen Puglia
Praveen Puglia

Reputation: 5631

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!

Upvotes: 9

Pranay kumar
Pranay kumar

Reputation: 2197

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

Upvotes: 0

Suhag Lapani
Suhag Lapani

Reputation: 695

 .className{
  vertical-align: baseline;
}

try this class

Upvotes: 1

Related Questions