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 のインストールと展開の例
推薦する
HTML テーブル マークアップ チュートリアル (48): CSS で変更されたテーブル
<br />では、CSS 構文を巧みに使用してテーブルを美しくする方法を見てみましょう。...
ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法
最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...
初心者向け入門チュートリアル: ドメイン名の解決とバインディング
では、ドメイン名を登録して仮想ホストを購入した後、IE でドメイン名を入力して Web サイトを開く...
Vueはページング機能を実装する
この記事の例では、ページング機能を実装するためのVueの具体的なコードを参考までに共有しています。具...
Vue はアップロードされた画像に透かしを追加する機能を実装します
この記事では、Vueでアップロードされた画像に透かしを追加する具体的な実装コードを参考までに共有しま...
LinuxでTomcatのポート番号を変更する方法
ここには複数の Tomcat があります。それらを同時に使用する場合は、ポート番号を別の番号に変更す...
HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
CSS3 で翻訳効果 (transfrom: translate) を実装する例
移動を実現するためにtranslateパラメータを使用しますtranslateX: X 軸に沿って移...
モバイル開発におけるHTML5開発の現状を深く理解する
「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...
CSS で左上の三角形を作成するいくつかの方法の詳細な説明
今日は、CSS を使用して左上の三角形を記述するいくつかの方法を紹介します。概略図（幅と高さを60p...
JSはUUIDとNanoIDというユニークなIDメソッドを生成します
目次1. NanoIDがUUIDに取って代わる理由2. jsを生成する方法3. ナノID方式序文：ユ...
Div はフラッシュを覆います。フラッシュ透過方式により、フラッシュ上に DIV レイヤーを配置できます。
2つのタイプがあります: (異なるブラウザ) 1. IEブラウザで利用可能コードをコピーコードは次の...
Sublime / vscode による HTML コード生成の迅速な実装
目次基本的なHTML構造div とクラス名のショートカット キーを生成するクラス名を持つdiv ID...
vue-cli でレスポンシブ レイアウトを実装する方法
フロントエンド開発を行うと、PCとモバイル端末の適応に必然的に直面することになります。このような問題...
Kafka の Docker デプロイメントと Spring Kafka 実装
この記事は主にDockerによるKafkaのデプロイとSpring Kafkaの実装について紹介しま...