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 を応援していただければ幸いです。 |
>>: Linux での Docker のインストールと展開の例
推薦する
JSにおける合同と不等式、等式と不等式の問題について
目次一致と不一致一致するすべてが平等ではない平等と不平等等しい等しくない一致と不一致シンボルの両側の...
Dockerカスタムネットワークの詳細な紹介
目次Dockerカスタムネットワーク1. カスタムネットワークの紹介2. カスタムネットワークを作成...
MySQL シリーズ データベース設計 3 つのパラダイム チュートリアルの例
目次1. データベース設計の3つのパラダイムに関する知識の説明1. デザインパラダイムとは何ですか?...
Tomcat サーバーの設定と Web プロジェクトの公開に関する IDEA グラフィック チュートリアル
1. Webプロジェクトを作成したら、Tomcatを例にサーバーを構成する必要があります。 2. 実...
WeChatアプレットのスクロールビューが左右にスライドできない問題を解決する方法
私は現在、自分自身の小さなプログラム プロジェクトに取り組んでいます。プロフェッショナルなフロントエ...
CSS 変数に基づくテーマ切り替えに最適なソリューション (推奨)
この要件を受け取ったとき、Baidu は、CSS リンクの置き換え、className の変更、le...
WeChatアプレットが左右連携を実現
この記事では、WeChatアプレットの左右連動を実現するための具体的なコードを参考までに紹介します。...
Linux Jenkins 構成スレーブノード実装プロセス図
序文： Jenkins のマスター スレーブ分散アーキテクチャは、主に、Jenkins に単一ポイン...
Web デザイン ヘルプ: Web フォント サイズ データ リファレンス
<br />内容はインターネットから転載したものです。どこから見つけたのか忘れてしまいま...
MongoDB の起動エラーを解決します: 共有ライブラリのロード中にエラーが発生しました: libstdc++.so.6: 共有オブジェクト ファイルを開けません:
MongoDB を起動すると、プロンプトは次のようになります。共有ライブラリのロード中にエラーが発...
CentOS インストール mysql5.7 詳細チュートリアル
この記事では、参考までに、centOSにmysql5.7をインストールする詳細な手順を紹介します。具...
Vueはページキャッシュ機能を実装する
この記事の例では、ページキャッシュ機能を実装するためのVueの具体的なコードを参考までに共有していま...
Windows 10 に Linux サブシステムをインストールする 2 つの方法 (画像とテキスト付き)
Windows 10 は Linux サブシステムをサポートするようになり、面倒なデュアル システ...
Linux での MySQL 5.6.27 インストール チュートリアル
この記事では、LinuxでのMySQL 5.6.27のインストールチュートリアルを参考までに紹介しま...
nginx で同時接続リクエストの数を制限する方法
導入同時接続数を制限するモジュールは http_limit_conn_module です。アドレス:...