line-height=height要素の高さだがテキストが垂直方向に中央揃えされない問題を解決する

まず、行の高さが要素の高さと等しい場合にテキストが垂直方向に中央揃えにならない理由を説明します。実際、行の高さが要素の高さと等しい場合、テキストは実際には中央揃えにはなりませんが、中央揃えに見えます。要素の高さとフォント サイズの差が大きい場合、これはますます顕著になります。ここでは、「ベースラインとは何か?」を参照してください。

下の画像の緑の線はベースラインです。行の高さはテキストの2行間の距離を表します[ベースライン]

解決策1:

行の高さ、配置、疑似要素を組み合わせる

。文章{
  幅: 16px; 
  高さ: 16px;
  フォントサイズ: 10px;
  テキスト配置: 中央;
}
.text::after{
  コンテンツ： ' ';
  表示: インラインブロック;
  幅: 0;
  高さ: 100%;
  垂直位置合わせ: 中央;
  上マージン: 1px;
}

解決策2:

CSS3 の scale プロパティを使用して、すべての値を 2 倍のサイズに設定し、サイズを 2 倍にします。

。文章{
  幅: 32px; 
  高さ: 32px;
  行の高さ: 32px;
  フォントサイズ: 20px;
  テキスト配置: 中央;
  変換: スケール(0.5);
}

line-height=height 要素の高さがテキストの垂直中央揃えにならない問題の解決方法に関するこの記事はこれで終わりです。line-height=height 要素の高さに関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。