html - 在 CSS 按钮中垂直和水平对齐文本

Question

我有一个在 CSS 中被设置为看起来像一个按钮的样式。我遇到的问题是按钮必须是 185px 宽和 75px 高。我猜对了，但是按钮的文本漂浮在左上方的某个地方。

如何让文本准确显示在按钮的中间？我创建了一个JSfiddle，所以你们可以检查一下。

//Ignore this comment.

Answer 1

将高度更改为line-height并添加text-align:center

.button-large{
    text-decoration: none;
  display: inline-block;
text-align:center;
  width: 185px;
  line-height: 75px;
  font-family: sans-serif;
  color: rgb(116, 79, 145);
  font-size: 24px;
  padding: 10px;
  text-shadow: 0px -1px 0px rgba(30, 30, 30, 0.6);
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  background: rgb(156, 125, 185);
  background: -moz-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
  background: -webkit-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
  background: -o-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
  background: -ms-linear-gradient(90deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
  background: linear-gradient(0deg, rgb(156, 125, 185) 30%, rgb(170, 150, 201) 70%);
  -webkit-box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.4);
  -moz-box-shadow:    0px 2px 1px rgba(0, 0, 0, 0.4);
  box-shadow:         0px 2px 1px rgba(0, 0, 0, 0.4);

}

演示