最初のタイプ: 完全な 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> |
<<: 表内のコンテンツオーバーフローのレイアウト方法について
通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...
jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...
目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...
この記事では、CSS3 を使用した Web サイトの商品表示の効果を紹介し、皆さんと共有します。詳細...
MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...
NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...
シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...
直接コード: タイプとして「bigint unsigned」、バイトとして「8」、max_numとし...
目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...
目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...
まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...
Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...
問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...
序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...
この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...