button - 垂直对齐：按钮中的文本中间

Question

我有这个布局：

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

当按钮有 1 行文本时，我的代码运行良好。但是当按钮有 2 行文本时，如上图所示。代码文本的高度很大，因为我使用了该line-height属性。我已经尝试过vertical-align，但它不起作用。

请参阅jsfiddle。

Answer 1

另一种方法是使用灵活的盒子：

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

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

您可能需要添加前缀，请参阅浏览器支持和小提琴。

Answer 2

垂直对齐仅影响显示为表格单元格（或内联块，但对后面的效果不同）的元素。这些元素不得浮动。

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

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