Html 在按钮中垂直居中对齐文本

我想将按钮中的两组文本垂直居中对齐。我该怎么做

我的演示：

a.block{
颜色：#ffffff；
背景：#f0；
字体大小：0.8rem；
高度：60px；
文本对齐：居中；
文字装饰：无；
宽度：30%；
浮动：左；
右边距：10px；
边缘底部：10px；
显示：内联块；
垂直对齐：中间对齐；
}

---

只需添加

行高：60px到你的
a.block
css

小提琴：
像这样试试：

CSS:

HTML:

您可以使用锚定上的
显示：表格
属性，然后将文本包装在跨距内，并将其显示为
表格单元格
，将跨距垂直对齐在中间

您不需要为此调整线条高度或填充


a.block{
颜色：红色；
背景：#f0；
字体大小：0.8rem；
高度：60px；
文本对齐：居中；
文字装饰：无；
宽度：30%；
浮动：左；
右边距：10px；
边缘底部：10px；
显示：表格；
}
跨度{
显示：表格单元格；
垂直对齐：中间对齐；
}

谢谢！！这看起来很完美：）@michaelmcgurk。。高兴的
 a.block {
  color: #000;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  line-height:60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: block;
  vertical-align: middle;
}
span{
    line-height:22px !important;
    display: inline-block;
    vertical-align: middle;
}

<a href="" class="block active"><span>Button</span></a>

<a href="" class="block active"><span>Button That Has More Words</span></a>