自定义按钮-文本在中间对齐不起作用

Question

我有一个自定义按钮，现在我想改变按钮的高度，但我不能设置底部中间的文本。我试了又试，什么都没有改变。我的一些尝试，我已经在centerize块中注释掉了。

.xButton {
  width: 76px;
  height: 35px;
  /* set the height */
  position: relative;
  overflow: visible;
  padding: 0.5em 1em;
  display: block;
  border: 1px solid #d4d4d4;
  margin: auto;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
  font: 11px/normal sans-serif;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -ms-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -moz-background-clip: padding;
  /* for Firefox 3.6 */
  background-clip: padding-box;
  border-radius: 0.2em;
  display: block;
  float: right;
  margin-right: 5px;
  /* IE hacks */
  zoom: 1;
}
.centerize {
  /* display: table-cell !important!;
	   vertical-align: middle !important!;
	   line-height: normal !important!;  */
  float: left;
}

<a href="#button" class="xButton centerize">Button XY</a>

Answer 1

删除

height: 35px;

并给

按钮添加一些内边距

padding: 1em 1.5em;

小提琴:https://jsfiddle.net/5pp310x9/

Answer 2

你需要设置line-height等于height of the button，即35px，而不是正常的，因为它对应于所用字体的行高。

.centerize {
  line-height: 35px; /* Added */
  float: left;
}

<<p> JSfiddle演示/strong>

.xButton {
  width: 76px;
  height: 35px;
  /* set the height */
  position: relative;
  overflow: visible;
  padding: 0.5em 1em;
  display: block;
  border: 1px solid #d4d4d4;
  margin: auto;
  text-decoration: none;
  text-align: center;
  text-shadow: 1px 1px 0 #fff;
  font: 11px/normal sans-serif;
  color: #333;
  white-space: nowrap;
  cursor: pointer;
  outline: none;
  background-color: #ececec;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#f4f4f4), to(#ececec));
  background-image: -moz-linear-gradient(#f4f4f4, #ececec);
  background-image: -ms-linear-gradient(#f4f4f4, #ececec);
  background-image: -o-linear-gradient(#f4f4f4, #ececec);
  background-image: linear-gradient(#f4f4f4, #ececec);
  -moz-background-clip: padding;
  /* for Firefox 3.6 */
  background-clip: padding-box;
  border-radius: 0.2em;
  display: block;
  float: right;
  margin-right: 5px;
  /* IE hacks */
  zoom: 1;
}
.centerize {
  line-height: 35px;
  float: left;
}

<a href="#button" class="xButton centerize">Button XY</a>

Answer 3

将按钮文本放入div中，并将这些属性添加到div

vertical-align: middle;
display: table-cell;
height: 35px;
width: 76px;

这意味着你的html看起来像这样

<a href="#button" class="xButton centerize" ><div style="
vertical-align: middle;
display: table-cell;
height: 35px;
width: 76px;">Button XY</div></a>