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 トランザクションの詳細

目次導入取引の4つの特徴トランザクション分離レベル確認するMVCC現在の読書スナップショット読み取り...

Spring Boot Docker パッケージング ツールの概要

目次スプリングブートDocker spring-boot-maven-プラグインSpotify Ma...

VirtualBox を使用して Linux クラスターをシミュレートする方法

1. ホストMacbookにHOSTをセットアップする前回のドキュメントでは仮想マシンの静的 IP ...

一般的な Linux ディストリビューションのミラーソース構成の概要

最近 Linux を研究していて、いくつかの Linux ディストリビューションを試してみましたが、...

体験したい17 404ページ

404 を避けるべきだとどうして言えるのでしょうか? その理由は、ほとんどの 404 ページが粗雑す...

Javascript の基礎: 演算子とフロー制御の詳細な説明

目次1. オペレーター1.1 算術演算子1.2 インクリメント演算子とデクリメント演算子1.3 比較...

Webデザインの経験: Webコードを効率的に書く

本来、この第 7 章では、デザインにおけるレイヤーと空間テクニックについて深く議論するはずです。しか...

MySql のサブクエリ内のクエリ例の詳細な説明

北西を見ると私の故郷はどこにあるでしょうか。南東の満月を何度見たことがあるでしょうか。月が再びゆっく...

SWFObjectを使用すると、HTMLにFlashを挿入する際のブラウザ互換性の問題を完全に解決できます。

一緒に学びましょう1. 伝統的な方法コードをコピーコードは次のとおりです。 <object c...

MySQL 起動失敗の問題とシナリオ分析

1. ワンストップソリューション1. 問題の分析と特定 # MySQL設定ファイルを見つけて、MyS...

mysql 8.0.16 winx64.zip インストールと設定方法のグラフィックチュートリアル

この記事では、MySQL 8.0.16 winx64.zipのインストールと設定方法の具体的なコード...

Linux で MySQL スケジュール タスク バックアップ データを実装する方法

序文バックアップは災害復旧の基礎であり、システム操作エラーやシステム障害によるデータ損失を防ぐために...

MySQL UPDATE ステートメントの非標準実装コード

今日は、MySQL データベースと SQL 標準 (および他のデータベース) の UPDATE ステ...

GZIP 圧縮 Tomcat と Web パフォーマンスの改善プロセス図

1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...

Vue.jsクラウドストレージで画像アップロード機能を実現

序文ヒント:以下はこの記事の主な内容です。以下のケースを参考にしてください。 1. オブジェクトスト...