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

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 をよろしくお願いいたします。

<<:  CSS コード省略 div+css レイアウト コード省略仕様

>>:  HTML タグ sup と sub の応用の紹介

推薦する

MySQL はどのようにしてマスターとスレーブの同期を実現するのでしょうか?

マスタースレーブ同期 (マスタースレーブレプリケーションとも呼ばれる) は、マスタースレーブデータの...

MySQLのページング制限のパフォーマンス問題についての簡単な説明

MySQL ページング クエリは通常、制限を通じて実装されます。 limit は 1 つまたは 2 ...

CentOS 上での MySQL 5.6 のコンパイルとインストール、および複数の MySQL インスタンスのインストールの詳細な説明

--1. mysql用の新しいグループとユーザーを作成する # ユーザー追加 -M -s /sbin...

MySQL 8.0 の降順インデックス

序文インデックスが順序付けられていることは誰もが知っていると思いますが、MySQL の以前のバージョ...

入力要素 [type="file"] を使用する場合のスタイルのカスタマイズとブラウザの互換性の問題に関する議論

この2日間、Baixing.comの筆記試験問題を解いているときに、このような問題に遭遇しました。H...

iframeをカプセル化するvueコンポーネントを開発する

目次1. コンポーネントの紹介2. コンポーネントの内部構造とロジック1. コード組織構造2. マッ...

HTML CSS JS はタブページのサンプルコードを実装します

コードをコピーコードは次のとおりです。 <html xmlns="">...

Dockerを使用して分散lnmpイメージを作成する

目次1. Docker分散lnmpイメージ生成1. Nginx、MySQL、PHPコンテナを実行する...

MySQL データ型の完全分析

データ型: 列に格納できるデータとそのデータが実際にどのように格納されるかを定義する基本ルール。デー...

シェルスクリプトを使用したMySQLデータベースの自動バックアップ

シェルスクリプトを使用したMySQLデータベースの自動バックアップデータベースを頻繁にバックアップす...

HTML テーブルの空白セル補完を実装する方法

私が初めて Web 開発を独学で学んだ頃は、いわゆる DIV/CSS レイアウトはなく、テーブル レ...

VUE のコンパイル スコープとスロット スコープのスロットの問題について

スロットとは何ですか?スロット ディレクティブは v-slot であり、現在 slot と slot...

MySQL方言の簡単な紹介

データベースはさておき、人生における方言とは何でしょうか?方言とは、ある場所特有の言語です。他の場所...

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by 問題を解決する

MySQL 5.7.9 バージョンの sql_mode=only_full_group_by の問題...