vertical-align:middle for text in button

Question

I have this layout:

My CSS:

body {
     background: #e2eaed;
}
         


        

Answer 1

Another method would be using flexible boxes:

a {
  display: inline-flex;
  align-items: center; /* cross axis */
  justify-content: center; /* main axis */

  line-height: 1; /* reset */
}

You may need to add prefixes, see browser support and fiddle.

Answer 2

Vertical align only affects elements that displayed as table cells (or inline blocks, but effect on later is different). Those elements must not be floated.

a {
  display: table-cell;
  vertical-align: middle;

  /* Reset */
  float: none;
  line-height: normal;
}