0

ボタンのように見えるようにCSSでスタイル設定されたを持っています。私が抱えている問題は、ボタンの幅が185ピクセル、高さが75ピクセルでなければならないということです。正解ですが、ボタンのテキストが左上のどこかに浮かんでいます。

ボタンの真ん中にテキストを正確に表示するにはどうすればよいですか？私はJSfiddleを作成したので、皆さんはそれをチェックできます。

//Ignore this comment.
4

1 に答える 1

3

高さをに変更し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);

}

デモ

于 2013-02-22T06:45:27.470 に答える