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

}

<强> DEMO

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

1 个答案: