How to move the icon to the center in this social buttons?

Question

I am trying to move the font awesome icons to the center vertically and horizontally in its rounded background. But every time either it's on the left or on the top or on the bottom.
How to fix those icons and move to the center?

Here is the code (Since it's in the footer I've added extra lines here in CSS):

     
    .page-footer {
      background-color:#222222;
      padding: 0 40px;
      text-align: center;
    }
    .page-footer a {
      font-size:14px;
      color:#ffffff;
    }
    
    ul.social-buttons {
      text-align: center;
      justify-content: center;
      margin-top:40px;
    }
    
    ul.social-buttons li a {
      font-size: 35px;
      line-height: 50px;
      display: block;
      width: 70px;
      height: 70px;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      color: #222222;
      border-radius: 100%;
      outline: none;
      background-color: #ffffff;
      border:5px solid #fed136;
    }
    
    ul.social-buttons li a:active, ul.social-buttons li a:focus, ul.social-buttons li a:hover {
      background-color: #fed136;
    }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="col-md-4">

                  <ul class="list-inline social-buttons">
                      <li class="list-inline-item">
                        <a href="#">
                          <i class=" fab fa-linkedin-in"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-google-plus-g"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                        <a href="#">
                          <i class="fab fa-facebook-f"></i>
                        </a>
                      </li>
                      <li class="list-inline-item">
                          <a href="#">
                            <i class="fab fa-twitter"></i>
                          </a>
                        </li>
                    </ul>
      </div>

Possible duplicate of [How to vertically center a div for all browsers?](https://stackoverflow.com/questions/396145/how-to-vertically-center-a-div-for-all-browsers) — ElusiveCoder, Nov 29 '18 at 09:46
@vidy that is to align horizontally not vertically. Mehraj Khan , display flex without align-items or justify-content doesn't align elements in the center — Mihai T, Nov 29 '18 at 09:47

score 1 · Accepted Answer · answered Nov 29 '18 at 09:42

You can use vertical-align:middle on the i elements. They are inline-block elements and they will be vertical aligned inside their container. No need to add specific line-heights or margins etc.

See below

.page-footer {
  background-color: #222222;
  padding: 0 40px;
  text-align: center;
}

.page-footer a {
  font-size: 14px;
  color: #ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top: 40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 50px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border: 5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}

ul.social-buttons li a i {
vertical-align:middle;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" rel="stylesheet"/>
<div class="col-md-4">
  <ul class="list-inline social-buttons">
    <li class="list-inline-item">
      <a href="#">
                      <i class=" fab fa-linkedin-in"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-google-plus-g"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                      <i class="fab fa-facebook-f"></i>
                    </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
                        <i class="fab fa-twitter"></i>
                      </a>
    </li>
  </ul>
</div>

Another option would be

ul.social-buttons li a {
    display: flex;
    align-items: center;
    justify-content: center;
}

score 0 · Answer 2 · answered Nov 29 '18 at 10:26

The line-height needs to be the same size as the elements container. While the <a> element takes up a height of 70px, 10px is used up by the border (5px each side) giving the container a height of 60px. However, you've only used 50px for the line-height.

Change the line-height from 50px to 60px.

This method just changes the line-height rather than using flex styles.

.page-footer {
  background-color:#222222;
  padding: 0 40px;
  text-align: center;
}
.page-footer a {
  font-size:14px;
  color:#ffffff;
}

ul.social-buttons {
  text-align: center;
  justify-content: center;
  margin-top:40px;
}

ul.social-buttons li a {
  font-size: 35px;
  line-height: 60px;
  display: block;
  width: 70px;
  height: 70px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  color: #222222;
  border-radius: 100%;
  outline: none;
  background-color: #ffffff;
  border:5px solid #fed136;
}

ul.social-buttons li a:active,
ul.social-buttons li a:focus,
ul.social-buttons li a:hover {
  background-color: #fed136;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

<div class="col-md-4">
  <ul class="list-inline social-buttons">
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-linkedin-in"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-google-plus-g"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-facebook-f"></i>
      </a>
    </li>
    <li class="list-inline-item">
      <a href="#">
        <i class="fab fa-twitter"></i>
      </a>
    </li>
  </ul>
  </div>

How to move the icon to the center in this social buttons?

2 Answers2