vertical-align：按钮中的文本的中间

本文介绍了vertical-align：按钮中的文本的中间的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有这种布局：

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

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

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.

请参见。

推荐答案

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

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

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