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 のインストールと展開の例
推薦する
JavaScriptタイマーとボタン効果設定の詳細な説明
タイマー効果: <div> <font id='timeCount'...
WeChatアプレット開発の章：落とし穴の記録
最近、会社初のミニプログラムの開発に参加しました。開発経験は基本的にWebViewをベースとしたハイ...
Docker コンテナの uid と gid の詳細な理解
デフォルトでは、コンテナ内のプロセスは root ユーザー権限で実行され、この root ユーザーは...
VMware Workstation のインストール (Linux カーネル) Kylin グラフィック チュートリアル
この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...
jsを使用して動的な背景を実現する
この記事の例では、動的な背景を実現するためのjsの具体的なコードを参考までに共有しています。具体的な...
CSS の一部のプロパティの前には「*」または「_」が付きます。
CSS の一部のプロパティの前には「*」または「_」が付きます。さまざまなブラウザを識別する例えば...
CSS 水平プログレスバーと垂直プログレスバーの実装コード
時々、素敵なスクロールバー効果を見るのは楽しいものです。ここでは、CSSを使用してそれを実現する方法...
Tomcat CentOS インストールプロセス図
Tomcat CentOS インストールこのインストール チュートリアルでは、次の内容について説明し...
MySQLでデータを削除してもディスク領域が解放されないのはなぜですか
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
VueはElementUIのフォームサンプルコードを模倣する
実装要件ElementUI を模倣したフォームは、インデックス コンポーネント、Form フォーム ...
Elimination の JavaScript ソースコード
ゲームのソースコードのダウンロードアドレスを取得するためのJavaScript：クリックしてソースコ...
HTML タグ マーキーを使用してスクロール効果を実現する簡単な方法 (必読)
ページの自動スクロール効果は JavaScript で実現できますが、今日偶然、JS 制御なしでさま...
Vue スキャフォールディング プロジェクトを作成するための詳細な手順
vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...
シンプルなフロントエンドのページング効果を実現する js
比較的シンプルな業務のプロジェクトもありますが、フロントエンドのページングを多用します。プラグインの...
CentOS6.9 での MySQL 5.7.17 のインストールと設定のチュートリアル
CentOS6.9はMysql5.7をインストールします。参考までに、詳細は次のとおりです。 1. ...