CSS の無効な行の高さ設定の問題の解決策

CSS の無効な行の高さ設定の問題の解決策

CSS の無効な行の高さ設定について

まず、次のコード文字列を記述します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		。頭{
			高さ: 100px;
			テキスト配置: 中央;
			line-height: 100px;/* フォントを中央に配置するために行の高さを設定します*/
			background: #333;/* フォントが見やすくなるように背景全体を黒に設定します*/
			色: 赤;
			font:700 18px simsun;/* フォントを設定する*/
		}
	</スタイル>
</head>
<本文>
	<div class="head">
		こんにちは、西南石油大学です。
	</div>
</本文>
</html>

次に、ブラウザで開いて効果を確認します。

垂直方向では、ボックスの中央にフォントが表示されないことがわかりました。

次に、フォントを設定するステートメントの下に、行の高さを設定するステートメントを配置します。

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
	<メタ文字セット="UTF-8">
	<title>ドキュメント</title>
	<スタイル タイプ="text/css">
		。頭{
			高さ: 100px;
			テキスト配置: 中央;
			background: #333;/* フォントが見やすくなるように背景全体を黒に設定します*/
			色: 赤;
			font:700 18px simsun;/* フォントを設定する*/
			line-height: 100px;/* 行の高さを設定する*/
		}
	</スタイル>
</head>
<本文>
	<div class="head">
		こんにちは、西南石油大学です。
	</div>
</本文>
</html>

次にブラウザで開きます:

フォントが真ん中にジャンプしました~~~~~

要約: CSS で行の高さを設定する場合、line-height 属性はフォントより下にする必要があります。そうでない場合は無効になります。

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

<<:  虫眼鏡効果を実現するJavaScript

>>:  Linux での Docker のインストールと展開の例

推薦する

MySQL を暗号化および復号化するいくつかの方法 (要約)

目次前面に書かれた双方向暗号化エンコード/デコードAES_ENCRYPT/AES_DECRYPT D...

MySQL 5.7 でブロックポジショニング DDL の問題を解決する

前回の記事「MySQL テーブル構造の変更、メタデータ ロックを知っておく必要があります」では、MD...

プレーヤー機能を実現するためのvue + element uiのサンプルコード

効果画像のない表示は単なる空虚な言葉です。 1. オーディオをベースにし、elementUI と組み...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...

Kubernetesでポッドを作成する方法

目次ポッドを作成するには? kubectl ツールポッドを作成するには?前回の記事では、コンテナとポ...

MySql8.023 インストール プロセスの詳細なグラフィック説明 (初回インストール)

まず、MySQL公式サイトからインストールパッケージをダウンロードします。MySQLはオープンソース...

Reactは二次的連鎖効果(階段効果)を実現する

この記事では、二次リンク効果を実現するためのReactの具体的なコードを参考までに共有します。具体的...

Centos サーバーで nginx を設定する方法の例

セキュアターミナルMobaXterm_Personalをダウンロードまず、安全なターミナルをダウンロ...

CSS を使用してサブ要素に応じて異なるスタイルを記述する方法

達成すべき効果: 必要なもの1枚、2枚、3枚とスタイルが異なります。子要素の判定はjsで完結できます...

Linuxの一般ユーザー向けスケジュールタスクの詳細な説明

序文通常のユーザーはcrontabスケジュールタスクを定義します。たとえば、Oracleユーザーはス...

Linux ソースコードの解析 epoll

目次1. はじめに2. シンプルなepollの例2.1、epoll_create 2.2、構造体イベ...

知っておくべき 25 の Vue のヒント

目次1. プロパティを型リストに制限する2. デフォルトのコンテンツと拡張ポイント3. ネストされた...

MySQL 5.7 のルートパスワードログイン問題の解決策

前回の記事でMySQLサービスが起動しない問題が解決したと分かった後、パスワードなしでrootユーザ...

HTML+CSS ボックスモデルの例 (円、半円など) 「border-radius」はシンプルで使いやすい

多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...