CODEWITHSUNDEEP
htmlcss
Lance
Lance

Reputation: 21

Social media bar not aligning center

Does anyone know why the icons are just aligning left? I've tried using flexboxes as well, but the icons are too far away from one another. I've also tried using inline-block as the display.

.social-media {
  align-self: center !important;
}

.social-media ul {
  display: flex;
  align-self: center;
}

.social-media ul li {
  list-style: none;
  margin: 0 10px;
  align-content: center !important;
}

.social-media ul li .fa {
  color: #000000;
  font-size: 25px;
  line-height: 50px;
}

.social-menu ul li .fa:hover {
  color: #ffffff;
}

.social-media ul li a {
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: white;
  text-align: center;
  box-shadow: 0px 7px 5px rgba(0, 0, 0, 0.5);
}
<div class="social-media">
  <ul>
    <li><a href=""><i class="fa fa-facebook"></i></a></li>
    <li><a href=""><i class="fa fa-twitter"></i></a></li>
    <li><a href=""><i class="fa fa-instagram"></i></a></li>
    <li><a href=""><i class="fa fa-linkedin"></i></a></li>
  </ul>
</div>

Upvotes: 0

Views: 42

Answers (2)

thenocturnalguy
thenocturnalguy

Reputation: 302

I think this should work.

.social-media {
  display:flex;
  justify-content:center;
}

Upvotes: 1

Paul Baiju
Paul Baiju

Reputation: 419

To position all the icons to the center you can use the below css

.social-media {
  align-self: center !important;
  width: fit-content;
  display: block;
  margin: auto;
}

Upvotes: 1

Related Questions