DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります

DIV と画像の水平および垂直の中央揃えは複数のブラウザと互換性があります

最初のタイプ: 完全な 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データの挿入、更新、削除の詳細

推薦する

Windows で MySQL マスター スレーブ レプリケーションを構成する方法

MySQL マスター/スレーブ レプリケーションを使用すると、1 つのデータベース (マスター デー...

Reactでファイルパスエイリアスを素早く設定する方法

React は、ユーザー インターフェイスを構築するための JavaScript ライブラリです。F...

ユニアプリとミニプログラム(画像とテキスト)を下請けする方法を教えます

目次1. ミニプログラム下請け2. Uniapp 下請けアプレット下請けの手順: 1. manife...

Javascriptのクロージャとアプリケーションの詳細な説明

目次序文1. クロージャとは何ですか? 1.1 クロージャは条件コードを満たす1.2 クロージャ生成...

Centos7 に Docker をインストールします (2020 の最新バージョンが利用可能、コピーして貼り付けるだけ)

操作については、こちらの公式ドキュメントを参照してください。インストール1. 古いバージョンの do...

Vue3 がデータ監視を実装するためにプロキシを使用する理由の分析

Vue データの双方向バインディング原則ですが、この方法には欠点があり、配列とオブジェクトの部分的な...

XHTML におけるタイトルタグと段落タグの使用に関する詳細な説明

XHTML 見出しの概要Word 文書を作成するときは、「第 1 章」、「1.2.1」などのタイトル...

要素の幅(高さ)の適応を実現するCSSおよびCSS3の柔軟なボックスモデル

1. CSSは左の固定幅と右の適応幅を実現します1. ポジショニング <!DOCTYPE ht...

vue-routerのマッチングに基づいてパンくずリスト機能を実現する

この記事では主にvue-routerのmatchedをベースにしたbreadcrumb機能を紹介し、...

Mysql binlog ログファイルが大きすぎる場合の解決策

目次1. 関連するbinlog設定2. binlogに関する詳細設定2.1 バイナリログモードの変更...

JavaScriptコールバック関数の詳細な理解

目次序文クイックレビュー: JavaScript 関数関数とは何ですか?関数を宣言する関数の呼び出し...

$remote_addr に基づく nginx フロントエンド配布方法の詳細な説明

要件は次のとおりです。ドメイン名の下に複数のサーバーがあります。現在、特定の地域をテストしています。...

Vue + 要素の動的複数ヘッダーと動的スロット

目次1. 需要2. 効果3. すべてのコード1. 需要ユーザーが自分でテーブルを構成できるようになり...

JavaScript ドキュメント オブジェクト モデル DOM

目次1. JavaScriptはページ内のすべてのHTML要素を変更できる1. IDでHTML要素を...

Ubuntu 16.04 にソースコードから Mininet をインストールする

ミニネットMininet は軽量のソフトウェア定義ネットワークおよびテスト プラットフォームです。軽...