Question

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

a.block {
  color: #ffffff;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: inline-block;
  vertical-align: middle;
}

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

Answer 1

您可以在锚点上使用display:table属性，然后将文本包装在范围内，并将其显示为table-cell，并将范围垂直对齐。

您无需为此调整行高或填充。 Fiddle

a.block {
  color: #red;
  background: #F0F0F0;
  font-size: 0.8rem;
  height: 60px;
  text-align: center;
  text-decoration: none;
  width: 30%;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
  display: table;
}
span {
  display: table-cell;
  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>

Answer 2

只需将line-height: 60px;添加到a.block css

即可

小提琴：http://jsfiddle.net/ghorg12110/fc6317ne/1/

Answer 3

请尝试以下操作： Demo

CSS：

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

HTML：

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

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

在按钮中垂直对齐文本

3 个答案: