垂直对齐：中间为按钮文本 [英] vertical-align:middle for text in button

问题描述

我有这样的布局：

我的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行文字，我的code效果很好。但是，当按钮有2行文字，如上图所示。在code文本有很大的高度，因为我用的是行高属性。我曾尝试垂直对齐，但它不工作。

​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.

请，请参见的jsfiddle 。

推荐答案

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

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

这篇关于垂直对齐：中间为按钮文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！