Unable to centre social footer

Question

I am seeing a strange issue where social footer icons are not centering? This is code I have inherited and just need someone else's pair of eyes to see if they know how to set the icons to be displayed in the center:

Code:

body { background-color: black }

<div class="socialfooter" style="padding-bottom: 15px; margin-bottom: 10px; text-align:center; margin-left:auto; margin-right:auto;">
  <p>
    <a style="float: left; margin-right: 12px;" href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px"></a>
    <a style="float: left; margin-right: 12px;" href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px"></a>
  </p>
  <p>
    <a style="float: left; margin-right: 12px;" href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px"></a>
  </p>
  <p>
    <a style="float: left; margin-right: 12px;" href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px"></a>
  </p>
</div>

How it looks at the moment:

this probably depends from the container css and its css but cannot see either in the question — Lelio Faieta, Jul 14 '21 at 06:58
I made you a snippet. You need to show the container and its CSS and not float the links — mplungjan, Jul 14 '21 at 06:58
If you float something it can't be centered. Use flexbox for this. — cloned, Jul 14 '21 at 07:01

score 2 · Answer 1 · answered Jul 14 '21 at 07:05

Just use

display: flex;
justify-content: center;

to the .socialfooter class

body {
  background: black;
}
.socialfooter {
    display: flex;
    justify-content: center;
  }

<div class="socialfooter" style="padding-bottom: 15px; margin-bottom: 10px; text-align:center; margin-left:auto; margin-right:auto;">
  <p>
    <a style="float: left; margin-right: 12px;" href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px"></a>
    <a style="float: left; margin-right: 12px;" href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px"></a>
  </p>
  <p>
    <a style="float: left; margin-right: 12px;" href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px"></a>
  </p>
  <p>
    <a style="float: left; margin-right: 12px;" href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px"></a>
  </p>
</div>

This solution also works and upvoted – BruceyBandit Jul 14 '21 at 07:15 — BruceyBandit, Jul 14 '21 at 07:15
This is the modern solution – mplungjan Jul 14 '21 at 07:19 — mplungjan, Jul 14 '21 at 07:19

score 1 · Accepted Answer · answered Jul 14 '21 at 07:02

Just remove the float: left on the links that is causing them to, well, actually float to the left, and change the paragraphs to display: inline-block;

body { background-color: black }

.socialfooter p {
  display: inline-block;
}

<div class="socialfooter" style="padding-bottom: 15px; margin-bottom: 10px; text-align:center; margin-left:auto; margin-right:auto;">
  <p>
    <a style="margin-right: 12px;" href="https://www.instagram.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Instagramwhite.svg" width="30px" height="30px"></a>
    <a style="margin-right: 12px;" href="https://www.facebook.com/balancecoffee20" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Facebookwhite.svg" width="29px" height="29px"></a>
  </p>
  <p>
    <a style="margin-right: 12px;" href="https://twitter.com/BalanceCoffeeUK" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Twitterwhite.svg" width="30px" height="30px"></a>
  </p>
  <p>
    <a style="margin-right: 12px;" href="https://www.pinterest.com/balancecoffee" target="_blank" rel="noopener nofollow"><img loading="lazy" src="https://balancecoffee.co.uk/stage/wp-content/uploads/2020/07/Pinterestwhite.svg" width="30px" height="30px"></a>
  </p>
</div>

Unable to centre social footer

2 Answers2