Text doesn't align in the middle

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:

The picture doesn't fit the div.
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.

Oram · Accepted Answer · 2019-04-04T06:20:52.743

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.

score 3 · Answer 2 · answered Apr 04 '19 at 06:13

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

.external-links {
  display: inline-flex;
  align-items: center;
  background: #ccc;
  vertical-align: middle;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding-right: 0.7em;
  
}
.external-links img {   
    width: 2em;
    height: 2em;
}
.external-links span {   
    padding-left: 0.5em;
}

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://cdn3.iconfinder.com/data/icons/social-media-2169/24/social_media_social_media_logo_github-512.png">
    <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>

You can try this, I added new css to .external-links and .external-links span to meet your requirement

score 1 · Answer 3 · answered Apr 04 '19 at 06:03

1

Add the following into your css:

.external-links img {
    vertical-align: middle;
}
.external-links span {
    vertical-align: middle;
}

answered Apr 04 '19 at 06:03

hirakJS

109
5

Karuppiah RK · Answer 4 · 2019-04-04T06:13:23.903

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

.external-links {
  display: inline-flex;
  background: #ccc;
  align-items: center;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 10px;
}

<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>

Remove display:table-cell and vertical-align:middle and add display:inline-flex and align-items:center in .external-links class. Also, I have added padding:10px for better understanding.

.external-links {
    display: inline-flex;
    align-items: center;
}

If you don't want to add flex concept, you can try this below result.

.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: 10px;
}

img {
  vertical-align: middle;
}

span {
  display: inline-block;
  vertical-align: middle
}

<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>

AhmadMM · Answer 5 · 2019-04-04T06:19:59.333

just change the display in .external-links to display: inline-flex;

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

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

<div class="child">
  <a class="external-links" href="https://github.com/amirashabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>github</span>
  </a>
  <a class="external-links" href="https://twitter.com/amirashabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>twitter</span>
  </a>
  <a class="external-links" href="https://stackoverflow.com/users/6282576/amir-a-shabani" target="_blank">
    <img src="https://lh4.googleusercontent.com/proxy/ddMp9taDBd8rd8jGiHnrO9QkBszt6vtsyutg9qZRxx-9my7zDQGRoOiam-fLPgN5aup5GlFIu1a1qe-HiLEPQYsKBC_394istidTekfjsd6l6iHsuQ0dHyVDtEmC_FPdQ8qLNyaRKgegP9IkIw02ZwKzoX73WwEir8PnbRl9NgV1-qRnVg=w1200-h630-p-k-no-nu">
    <span>stackoverflow</span>
  </a>
</div>

score 1 · Answer 6 · answered Apr 04 '19 at 06:17

Added display: flex; to .child and .external-links and

.external-links{justify-content: center;
  padding: 10px;
  align-items: center;
  margin: 5px;}

.child {
  margin: 20px;
  display: flex;
}

.external-links {
  display: flex;
  background: #ccc;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  justify-content: center;
  padding: 10px;
  align-items: center;
  margin: 5px;
}

<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>

score 1 · Answer 7 · answered Apr 04 '19 at 06:39

1

.external-links {
  display: inline-block;
  background: #ccc;
  border-radius: 32px;
  color: black;
  text-decoration: none;
  padding: 1px;
}
.external-links > *{
    vertical-align: middle;
    text-align: center;
    height: 100%;
}

answered Apr 04 '19 at 06:39

kaluogh

64
5

vertical-align Inherited is no, so you should set child. if you not set child align type , image html don't have base-line, so the image's bottom is new base-line, after image , text will align by image's bottom, if you have set child align type ,they will work. i Think. – kaluogh Apr 04 '19 at 06:43

score 1 · Answer 8 · answered Apr 04 '19 at 07:15

1

Use display: inline-flex; to make the Image center with the HTML Code

.external-links {
  display: inline-flex;
}

answered Apr 04 '19 at 07:15

score 0 · Answer 9 · answered Apr 04 '19 at 06:12

You're looking for the the line-height property, if you give it the same value as the height property, you'll get vertically centred text.

Try this:

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

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

You could also align the buttons side by side using the inline-block value for the display property.

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

.external-links {
  padding: 1px;
  display: inline-block;
  background: #CCC;
  vertical-align: middle;
  line-height: 250px;
  text-align: center;
  border-radius: 32px;
  color: black;
  text-decoration: none;
}

Text doesn't align in the middle

9 Answers9