Why is the anchor tag smaller than the child image?

On my site, http://www.redsquiggli.es under the "Contact Me" section, why are my anchor tags smaller (and underneath) the images that they contain?

Shouldn't the anchor be bigger (with it's specified padding) than it's contents?

Also, I've been trying to get those two icons to be vertically centered in the p tag that the anchor is in... auto margining is not 开发者_如何学Goworking there either. What's the reason for that?

Make the a tags display:inline-block; and they will surround the images as you expect, and they will be horizontally centered (as they already are) by the text-align: centre; you have set globally.

You can't vertically align an element in css unless you use a table. Although you can make divs behave like tables with some css, but this will not work in IE: link text

Edit 2016:

You can now use flexbox vertically centre an element.

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

Look here about the css display property. I guess you should use display:block oder inline-block.

To the second: Auto-margin never works if there's no width specified. Put the two as into a div and set it's width to a fix value (or percentage which doesn't make any sense in your case).

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