'Why can't I center the icons within their borders?

I'm trying to add social media icons to my website, but I'm having trouble centering them in their bordered box:

icons aren't centered

This is my HTML:

     <div id="social">

        <a class="social-button" href="#">
            <img src="/resources/img/coolicon-1.svg">
        </a>

        <a class="social-button" href="#">
            <img src="/resources/img/coolicon.svg">
        </a>

        <a class="social-button" href="#">
            <img src="/resources/img/coolicon-2.svg">
        </a>

    </div>

And this is the CSS:

* {
    background-color: black;
}

.social-button {
    border-style: solid;
    border-color: white;
    padding: 2px;
}

I double checked and the SVGs don't have any extra padding:

the SVGs I'm using

htmlcss


Solution 1:[1]

a elements use display: inline; as default, so you need to make them display: inline-block; for making images inside the boxes

* {
  background-color: black;
}

.social-button {
  display: inline-block; /* Added the display here */
  border-style: solid;
  border-color: white;
  padding: 2px;
}
   
.social-button > img {
  display: flex;
}
<div id="social">
  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>

  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>

  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>
</div>

Solution 2:[2]

*,*::before,*::after{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  background-color: black;
}

.social-button {
  display: inline-block;
  border: 2px solid white;
  padding: 2px;
}
<div id="social">
  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>

  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>

  <a class="social-button" href="#">
    <img width="40px" height="40px" src="https://upload.wikimedia.org/wikipedia/sco/thumb/9/9f/Twitter_bird_logo_2012.svg/1200px-Twitter_bird_logo_2012.svg.png" />
  </a>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Steve Walson

Related Questions