7

私はこのレイアウトを持っています：

レイアウト

私のCSS：

body {
     background: #e2eaed;
}
a {
     text-decoration: none;
     color: #fff;
     font-size: 30px;
     height: 62px;
     line-height: 62px;
     /* vertical-align: middle is not works  */
     background: #8dc73f;
     width: 132px;
     padding: 0 25px;
     font-size: 16px;
     text-align: center;
     font-weight: bold;
     margin-left: 4px;
     display: block;
     float: left;
}

ボタンに1行のテキストがある場合、私のコードはうまく機能します。ただし、上の画像のように、ボタンに2行のテキストがある場合。プロパティを使用しているため、コードテキストの高さが大きくなっていline-heightます。試しvertical-alignましたが、動作しません。

jsfiddleを参照してください。

4

2 に答える 2

12

別の方法は、フレキシブルボックスを使用することです。

a {
  display: inline-flex;
  align-items: center; /* cross axis */
  justify-content: center; /* main axis */

  line-height: 1; /* reset */
}

プレフィックスを追加する必要がある場合があります。ブラウザのサポートとフィドルを参照してください。

于 2012-12-16T14:02:55.183 に答える
6

垂直方向の整列は、テーブルセル（またはインラインブロックとして表示される要素にのみ影響しますが、それ以降の効果は異なります）。これらの要素をフロートさせてはなりません。

a {
  display: table-cell;
  vertical-align: middle;

  /* Reset */
  float: none;
  line-height: normal;
}
于 2012-12-16T13:19:05.497 に答える