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 のインストールと展開の例
推薦する
CSS における XHTML タグの対応する属性と使用法
XHTML CSS を使って Web ページをデザインし始めた頃は、タグの使用経験も少なく、あまり気...
レスポンシブ Web デザイン手法を実装し、ウォーターフォール モデルに別れを告げる 5 つのステップ (グラフィック チュートリアル)
次の Web デザイン プロジェクトはレスポンシブにする必要があると上司をようやく納得させることがで...
CSS における位置指定の概要
CSS には 4 種類の配置方法があり、シナリオによって効果が異なります。ここでは、これら 4 種類...
MySQLの半同期の詳細な説明
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
HTMLページ間でパラメータを渡すフロントエンド方式の詳細な説明
プロジェクトでよくある状況として、案件リストなどのリストが存在することがあります。リスト内の項目をク...
N キロメートル以内のデータを検索する MySQL の簡単な例
地球の円周率と半径、検索ポイントの経度と緯度から、検索ポイントと検索データテーブル間の距離はNキロメ...
CSSをインポートする方法に関する詳細な洞察の要約
CSS の開発履歴についてはここでは紹介しません。ブログを書いている理由の 1 つは、フロントエンド...
MySQLオンラインデッドロック分析練習
序文MySQL を学習する際に、MySQL のロック メカニズムについて簡単に理解したことがあると思...
Linux システムで時間を取得して使用する方法
Linux システム時間には 2 種類あります。 （１）暦上の時刻。値は、指定された時刻、1970 ...
CSS でのフレックスレイアウトの詳細な説明
フレックス レイアウトは、エラスティック レイアウトとも呼ばれます。任意のコンテナーをフレックス レ...
負のマージントップ値は、ラベルテキストと入力の間の垂直中央揃えの問題を解決します。
ラベルテキストと入力の垂直方向の中央揃えを調整するのは簡単ではありません。padding、verti...
ブラウザが登録できるイベントの概要
HTML イベント リスト一般イベント: onClick HTML: マウスクリックイベント。主にオ...
泡の小さな鋭角効果を実現するCSS
効果画像（境界線の色が薄すぎるので、{} で囲みます）： { }参考リンク Pure CSS バブル...
IPとポートが接続可能かどうかを検出する方法
Windows コマンドテルネット形式： telnet IP ポート場合： テルネット 191.1....
MySQL に大量のデータを挿入する 4 つの方法の例
序文この記事では主に、MySQLに大量のデータを挿入する4つの方法を紹介し、参考と学習のために共有し...