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

Question

我有一个自定义按钮，现在我想更改按钮的高度，但我无法在底部中间设置文本。我尝试过并试过，没有任何改变。我的一些尝试，我已经在中心区块注释了。

.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

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

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

JSfiddle Demo

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

删除

height: 35px;

并在按钮上添加一些填充

padding: 1em 1.5em;

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

Answer 3

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

$filename = time().rand(0,9999);

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

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