CODEWITHSUNDEEP
htmlcssbootstrap-4
Angel
Angel

Reputation: 83

How do I center social media icons within the footer?

I'm trying to center the social media icons within the footer, but for some reason when I edit the code there is still no change. Can anyone help?

footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
}

.fa{
    color: black;
    font-size: 50px;

}

<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-instagram"></a>
    </div>
  </footer>
 </div>
</div>

Upvotes: 0

Views: 6268

Answers (4)

DMA
DMA

Reputation: 53

You have three options to this:

  • If you are using Bootstrap, you can simplay add text-center to your footer calss.
  • you can add text-align: center to your footer style.
  • You can define the width of a div and then have margin auto to this div, as the following code

.social{
display: block;
width: 20%;
margin: auto;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

</head>
<body>
<div class="social">
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
</div>      
</body>
</html>

Upvotes: 1

Rajesh
Rajesh

Reputation: 272

You can achieve this with the help of display: flex property too. 

.footer-social-icons{
 display:flex;
 justify-content:center;
 width:100%;
 }

Upvotes: 0

caiovisk
caiovisk

Reputation: 3809

Symply align your text in the footer to center with text-align: center;.

footer {
  ...
  text-align: center;
}


footer {
  background-color: #FFF;
  color: white;
  padding: 15px;
  text-align: center;
}

.fa{
    color: black;
    font-size: 50px;

}
<div class="container">
  <footer>
    <div class="footer-social-icons">
        <a href="#" class="fa fa-facebook">F</a>
        <a href="#" class="fa fa-instagram">I</a>
    </div>
  </footer>
 </div>
</div>

Upvotes: 0

Andy Hoffman
Andy Hoffman

Reputation: 19109

Have you tried adding text-align: center to footer? enter image description here

jsFiddle

Upvotes: 2

Related Questions