I want to place my icons in the middle of the circle

Question

How can I place my icons in the middle of the circle, based on the following picture:

Here is my HTML code:

<footer>
    <div class="footer-bg-1">
      <h1 class="display-5" style="color: white">Find Me on</h1><br>
      <ul class="socialnetworks">
      <li>
          <a href="https://www.linkedin.com/" title="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
          </a>
      </li>
      <li>
          <a href="https://github.com/" title="GitHub">
            <i class="fab fa-github"></i>
          </a>
      </li>
      <li>
          <a href="https://twitter.com/" title="Twitter">
            <i class="fab fa-twitter"></i>
          </a>
      </li>
    </div>
</footer>

Here is my CSS code that needs to be modified to place the icons in the middle of the white circles:

ul.socialnetworks {
margin: 0;
border:15px;
padding: 0;
width: 100%;
text-align: center;
}

ul.socialnetworks > li {
display: inline-block;
}

ul.socialnetworks > li > a {
display: inline-block;
font-size: 25px;
line-height: 50px;
width: 58px;
height: 58px;
border-radius: 36px;
background-color: #313132;
box-shadow: 0px 0px 2px white;
color: white;
margin: 0 4px 3px 0;
border: 8px solid;
}

score 1 · Answer 1 · answered Jan 05 '21 at 00:19

You can try something like this:

.item{
  border-radius:50%;
  background-color:black;
  border:15px solid white;
  width:50px;
  height:50px;
  display:inline-flex;
}
body{
  background-color:black;
}
.item i{
    margin-top: 25%;
    margin-left: 25%;
    color:white;
}

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<div class="item">
 <i class="material-icons">add_task</i>
</div>
<div class="item">
 <i class="material-icons">add_task</i>
</div>
<div class="item">
 <i class="material-icons">add_task</i>
</div>

score 0 · Answer 2 · answered Jan 05 '21 at 00:42

set the line-height equal to height line-height: 58px;

ul.socialnetworks {
  margin: 0;
  border: 15px;
  padding: 0;
  width: 100%;
  text-align: center;
}

ul.socialnetworks>li {
  display: inline-block;
}

ul.socialnetworks>li>a {
  display: inline-block;
  font-size: 25px;
  line-height: 58px;
  width: 58px;
  height: 58px;
  border-radius: 36px;
  background-color: #313132;
  box-shadow: 0px 0px 2px white;
  color: white;
  margin: 0 4px 3px 0;
  border: 8px solid;
}

<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<footer>
  <div class="footer-bg-1">
    <h1 class="display-5" style="color: white">Find Me on</h1><br>
    <ul class="socialnetworks">
      <li>
        <a href="https://www.linkedin.com/" title="LinkedIn">
          <i class="fab fa-linkedin-in"></i>
        </a>
      </li>
      <li>
        <a href="https://github.com/" title="GitHub">
          <i class="fab fa-github"></i>
        </a>
      </li>
      <li>
        <a href="https://twitter.com/" title="Twitter">
          <i class="fab fa-twitter"></i>
        </a>
      </li>
  </div>
</footer>

score 0 · Accepted Answer · answered Jan 05 '21 at 00:44

Icons with class .fab have parameter display: inline-block. This means that vertical-align: middle can be used.

Just add it to your css:

.fab {
  vertical-align: middle;
}

ul.socialnetworks {
  margin: 0;
  border:15px;
  padding: 0;
  width: 100%;
  text-align: center;
}

ul.socialnetworks > li {
  display: inline-block;
}

ul.socialnetworks > li > a {
  display: inline-block;
  font-size: 25px;
  line-height: 50px;
  width: 58px;
  height: 58px;
  border-radius: 36px;
  background-color: #313132;
  box-shadow: 0px 0px 2px white;
  color: white;
  margin: 0 4px 3px 0;
  border: 8px solid;
}

.fab {
  vertical-align: middle;
}

<script src='https://kit.fontawesome.com/a076d05399.js'></script>

<footer>
    <div class="footer-bg-1">
      <h1 class="display-5" style="color: white">Find Me on</h1><br>
      <ul class="socialnetworks">
      <li>
          <a href="https://www.linkedin.com/" title="LinkedIn">
            <i class="fab fa-linkedin-in"></i>
          </a>
      </li>
      <li>
          <a href="https://github.com/" title="GitHub">
            <i class="fab fa-github"></i>
          </a>
      </li>
      <li>
          <a href="https://twitter.com/" title="Twitter">
            <i class="fab fa-twitter"></i>
          </a>
      </li>
      </ul>
    </div>
</footer>

I want to place my icons in the middle of the circle

3 Answers3