vertical-align:middle for text in button

问题:

I have this layout:

My CSS:

body {
     background: #e2eaed;
}
a {
     text-decoration: none;
     color: #fff;
     font-size: 30px;
     height: 62px;
     line-height: 62px;
     /* vertical-align: middle is not works  */
     background: #8dc73f;
     width: 132px;
     padding: 0 25px;
     font-size: 16px;
     text-align: center;
     font-weight: bold;
     margin-left: 4px;
     display: block;
     float: left;
}

​When button has 1-line text, my code works well. But when button has 2-line text, like in the image above. The code text has big height, because I use the line-height property. I have tried vertical-align but it is not working.

Please, see jsfiddle.

回答1:

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

回答2:

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.