最初のタイプ: 完全な CSS コントロール、レイヤーフローティング (ログインページに適しています) コードをコピー コードは次のとおりです。<%@ ページ言語="java" インポート="java.util.*" ページエンコーディング="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <ヘッド> <title>私の JSP</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="キャッシュコントロール" content="キャッシュなし"> <meta http-equiv="有効期限" content="0"> <meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3"> <meta http-equiv="description" content="これは私のページです"> <スタイル タイプ="text/css"> #divcenter{ position:absolute;/*フローティングレイヤー*/ 上位:50%; 残り:50%; 幅:300ピクセル; 高さ:300px; margin-top:-150px;/*これはDIVの高さの半分でなければならないことに注意してください*/ margin-left:-150px;/*これはDIVの幅の半分です*/ 背景:黄色; border:1px 赤一色; } </スタイル> </head> <本文> <div id="divcenter"> これはテストです </div> </本文> </html> 2 番目のタイプ: JS + CSS コントロール、フローティングなし (ログイン ページに適しています) コードをコピー コードは次のとおりです。<%@ ページ言語="java" インポート="java.util.*" ページエンコーディング="UTF-8"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <ヘッド> <title>私の JSP</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="キャッシュコントロール" content="キャッシュなし"> <meta http-equiv="有効期限" content="0"> <meta http-equiv="キーワード" content="キーワード1,キーワード2,キーワード3"> <meta http-equiv="description" content="これは私のページです"> <script type="text/javascript"> 関数cen(){ var divname = document.all("testdiv"); //中央の高さは、ページコンテンツの高さからDIVの高さを引いた値を2で割った値に等しい var topvalue = (document.body.clientHeight - divname.clientHeight)/2; divname.style.marginTop = topvalue; } // ページサイズが変更されたときにトリガーされます ウィンドウのサイズ変更 </スクリプト> </head> <body style="height:100%; width:100%; text-align:center;" onload=cen()> <div id = "testdiv" name = "testdiv" style = "margin:0 auto; border:1px solid red; height:400px; width:400px;"> DIV センタリングデモンストレーション </div> </本文> </html> 3番目のタイプ:最もシンプルで適用性が高く、上下左右の中央に配置され、すべてのブラウザと互換性があります。 コードをコピー コードは次のとおりです。<div style="position:absolute; top:50%; height:240px;border:1px solid red; margin:0 auto; margin-top:-120px; width:300px; left:50%; margin-left:-150px;"></div> その他の方法: 純粋な CSS は、div 内の画像の垂直および水平中央揃えの問題を完璧に解決します。IE7.0、IE6.0、IE5.5、IE5.0、FF、Opera、Safari と互換性があります。 以下はプログラムコードです コードをコピー コードは次のとおりです。<html> <ヘッド> <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=gb2312" /> <タイトル></タイトル> <スタイル タイプ="text/css"> .img_v { display:table-cell !important; 表示:ブロック; 位置:static !重要; 位置:相対; オーバーフロー:非表示; 幅:400ピクセル; 高さ:400px; 境界線:1px実線 #000; 垂直位置揃え:中央; テキスト配置:中央; } .img_v p { display:table-cell !important; 表示:ブロック; マージン:0; 位置:static !重要; 位置:絶対; 上位:50%; 残り:50%; 幅:400ピクセル; 左マージン:自動; 右マージン:自動; } .img_v 画像 { 位置:static !重要; 位置:相対; トップ:自動!重要; 上:-50%; 左:自動!重要; 左:-50%; } </スタイル> </head> <本文> <div class="img_v"> <p><img src="upload/2022/web/logo.gif"></p> </div> </本文> </html> |
<<: 表内のコンテンツオーバーフローのレイアウト方法について
MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...
React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...
目次1. ミニプログラム下請け2. Uniapp 下請けアプレット下請けの手順: 1. manife...
目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...
操作については、こちらの公式ドキュメントを参照してください。インストール1. 古いバージョンの do...
Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...
XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...
1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...
この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...
目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...
目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...
要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...
目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...
目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...
ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...