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データの挿入、更新、削除の詳細

推薦する

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

jQueryはフェードインとフェードアウト効果を実現します

jQuery を使用してフェードインとフェードアウト効果を完成させる前に、まずいくつかのコードを理解...

VMware ESXi サーバー仮想化クラスター

目次まとめ環境とツールの準備サーバー仮想化のインストール VMware ESXi仮想マシンのオペレー...

CSS3はウェブサイトの製品表示効果図を実現します

この記事では、CSS3 を使用した Web サイトの商品表示の効果を紹介し、皆さんと共有します。詳細...

MySQL ページング分析の原理と効率改善

MySQL ページング分析の原理と効率改善PERCONA PERFORMANCE CONFERENC...

MySQLのよくある間違い

NULL 値によると、MySQL の NULL 値は単にデータがないことを意味します。NULL 値は...

CentOS/RHEL システムで VLAN タグ付きイーサネット カードを使用する方法

シナリオによっては、Linux サーバー (CentOS/RHEL) の同じイーサネット カード (...

MySQL ステートメントを使用して、さまざまな整数が占めるバイト数とその最大値と最小値を調べる例

直接コード: タイプとして「bigint unsigned」、バイトとして「8」、max_numとし...

vuex データの永続化のための 2 つの実装ソリューション

目次ビジネス要件:解決策 1: vuex-persistedstate解決策2: vuex-pers...

Oracle を MySQL に置き換える際の問題と解決策

目次移行ツールアプリケーション変換mysql8.0 ドライバ パッケージを追加データソース構成の変更...

HTMLはシンプルで美しいログインページを作成します

まずは見てみましょう。 HTML ソースコード: XML/HTML コードコンテンツをクリップボード...

Centos7 に yum を使用して MySQL をインストールし、リモート接続を実現する方法

Centos7はyumを使用してMySQLをインストールし、リモート接続を実現する方法です。MySQ...

Vue プロジェクトを実行するときに `--fix` オプションで修正できる可能性のある警告のエラー問題を解決します。

問題: vue-cil3 は、`--fix` オプションで修正できる可能性のある警告とともに実行され...

Ubuntu 20.04 ファイアウォール設定の簡単なチュートリアル (初心者)

序文ますます便利になった今日のインターネット社会では、さまざまなインターネット ランサムウェア ウイ...

VMware Workstation のインストール (Linux カーネル) Kylin グラフィック チュートリアル

この記事では、VMware WorkstationにKylinをインストールする方法を参考までに紹介...