Why is the anchor shortcut smaller than the child’s image?

Question

On my website http://www.redsquiggli.es under the Contact Me section, why do my anchor tags reduce (and from below) the images they contain?

Should the anchor be larger (with the indicated addition) than its contents?

Also, I tried to make these two icons vertically center in the p tag where the anchor is located ... automatic marginality doesn't work either. What is the reason for this?

Answer 1

Make the tag display: inline-block; and they will surround the images as you expect, and they will be arranged horizontally (as they already are) using text-align: center; you installed globally.

You cannot vertically align an element in css if you are not using a table. Although you can make divs behave like tables with some css, but this will not work in IE: link text

Edit 2016:

Now you can use flexbox to vertically center the element.

Answer 2

Because links ( a) are the default display: inline.

Answer 3

css display. , display:block oder inline-block.

: , . a div fix ( , ).

#div-containing-the-as {
  width:300px;
  margin:auto;
}