2

初歩的なcssボタンを作ろうとしています。

テキストをボタン内の垂直方向および水平方向の中央に配置しようとすると、エラーが発生します。私はこの次のhtmlを持っています。

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
    #button
    {
      background:lightblue;
      border-radius: 30px;
      width: 15em;
      height: 3em;
      position:relative;
    }
    h1 {
      vertical-align: center;
      text-align: center;
    }
    </style>
    <title>Making a button...</title>
  </head>
  <body>
    <div id="button"><h1>Click Me</h1></div>
  </body>
</html>

この質問の jsfiddle: http://jsfiddle.net/CRpvr/

を使用した回避策があると言われましたが、line-height: 100%複数の行が必要な場合、これはうまく機能しません。これを達成するための最も慣用的で適切な方法は何ですか?

4

6 に答える 6

8

ボタン ID 内の「height」を「line-height」に変更するだけです。これを確認したところ、うまくいきました。

于 2013-07-03T09:14:31.900 に答える
7

パディングを追加するだけです：

padding:0.5em

サンプル: http://jsfiddle.net/cr9ef/2/

于 2013-07-02T22:32:59.637 に答える
4

追加display: table-cell; vertical-align: middleするとうまくいくかもしれません。

jsfiddle: http://jsfiddle.net/CRpvr/7/

于 2013-07-02T22:33:42.237 に答える
1

次のように、高さではなく id="button" にパディングを設定するだけです。

#button
{
  background:lightblue;
  border-radius: 30px;
  width: 15em;
  padding:1em;
  position:relative;
}

これにより、div の上と下のパディングが作成され、上と下が文言から等距離に広がります。これにより、h1 CSS タグの垂直方向の配置属性も不要になります。

于 2013-07-02T22:29:57.673 に答える
0

スタイルに追加line-height:3em;し#buttonます。その値を高さと同じにします。2 本の線が必要な場合は、高さを半分にします。font-size線が多いほど、線を小さくするようにしてください。

同じままにしたい場合はfont-size、高さを線の量に合わせて調整することで、ボタンの高さを高くすることができます。

フィドル

于 2013-07-02T22:30:01.280 に答える
0

コンテナを適切な高さにしてから、このようにコンテナ内で垂直方向に整列させてください::

<style type="text/css">
    #button
    {
      background:lightblue;
      border-radius: 30px;
      width: 15em;
      height: 3em;
      line-height: 3em;  /*  <-- this was it ! */
      vertical-align: middle;
      position:relative;
    }
    h1 {
      vertical-align: middle;
      /*vertical-align: center;*/ /* w.t.f? */
      text-align: center;
    }
    </style>

PS、CSS を検証してください: vertical-align:center が正しくありません ???

于 2013-07-02T22:32:43.403 に答える