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 のインストールと展開の例
推薦する
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ユーザーはス...
Docker Compose は MySQL に接続するために SpringBoot プロジェクトをデプロイしますが、そこで遭遇する落とし穴があります。
先ほど、Docker を使用して SpringBoot プロジェクトを簡単にデプロイし、Docker...
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」はシンプルで使いやすい
多くの友人は、フロントエンドを学習するときに、ボックス モデルがデフォルトで正方形であることに気付き...