Text doesn't align in the middle [duplicate]

Question

I wanted to recreate something like this:

And then I would use it for social medias and external sites :) This is what I could come up with:

As you can see, there are two problems here:

1. The picture doesn't fit the div.
2. The text isn't in the middle.

I thought if I could align the text to the center, the picture would automatically fit as well, but I can't seem to be able to do it.

Here's the code I wrote:

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: table-cell;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/github.ico' %}">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="{% static 'app/images/icons/twitter.ico' %}">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="{% static 'app/images/icons/stackoverflow.ico' %}">
    <span>stackoverflow</span>
  </a>
</div>

I thought the two lines of vertical-align: middle; & text-align: center; would center the text, but it doesn't.

Answer 1

To vertical align the text you need to put vertical-align: middle; on the img tag.

Regarding the image not fitting into the div, you need to set the border-radius to the image too.

a img {
  vertical-align: middle;
  border-radius: 32px;
}

.child {
  height: 250px;
  margin: 20px;
}

.external-links {
  display: inline-block;
  background: #ccc;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
  margin-right: 4px;
}

.external-links img {
  vertical-align: middle;
  border-radius: 32px;
  margin-left: -2px;
}

.external-links span {
  margin-right: 5px;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-github-m.png">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-twitter-m.png">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="https://cdnjs.cloudflare.com/ajax/libs/webicons/2.0.0/webicons/webicon-stackoverflow-m.png">
    <span>stackoverflow</span>
  </a>
</div>

In addition to the above, I made a few minor changes in the snippet (like changing display to inline-block and changed some margins) to make the result look a bit better.