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番目のタイプ：最もシンプルで適用性が高く、上下左右の中央に配置され、すべてのブラウザと互換性があります。

コードをコピー

コードは次のとおりです。

その他の方法:
純粋な 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データの挿入、更新、削除の詳細