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

Question

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

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

fiddle :https://jsfiddle.net/5pp310x9/