Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern

Der erste Typ: vollständige CSS-Steuerung, Layer Floating (geeignet für Login-Seiten)

Code kopieren

Der Code lautet wie folgt:

<%@ Seitensprache="java" import="java.util.*" Seitenkodierung="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<title>Meine JSP</title>
<meta http-equiv="pragma" content="kein-cache">
<meta http-equiv="Cache-Steuerung" content="kein Cache">
<meta http-equiv="läuft ab" content="0">
<meta http-equiv="Schlüsselwörter" content="Schlüsselwort1,Schlüsselwort2,Schlüsselwort3">
<meta http-equiv="description" content="Das ist meine Seite">
<style type="text/css">
#divcenter{
position:absolute;/*Floating-Ebene*/
oben: 50 %;
links: 50 %;
Breite: 300px;
Höhe: 300px;
margin-top:-150px;/*Beachten Sie, dass dies die Hälfte der DIV-Höhe sein muss*/
margin-left:-150px;/*Dies ist die Hälfte der DIV-Breite*/
Hintergrund: gelb;
Rand: 1px durchgehend rot; }
</Stil>
</Kopf>
<Text>
<div id="divcenter"> dies ist ein Test </div>
</body>
</html>

Der zweite Typ: JS + CSS-Steuerung, kein Floating (geeignet für Login-Seiten)

Code kopieren

Der Code lautet wie folgt:

<%@ Seitensprache="java" import="java.util.*" Seitenkodierung="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<Kopf>
<title>Meine JSP</title>
<meta http-equiv="pragma" content="kein-cache">
<meta http-equiv="Cache-Steuerung" content="kein Cache">
<meta http-equiv="läuft ab" content="0">
<meta http-equiv="Schlüsselwörter" content="Schlüsselwort1,Schlüsselwort2,Schlüsselwort3">
<meta http-equiv="description" content="Das ist meine Seite">
<Skripttyp="text/javascript">
Funktion cen(){
var divname = document.all("testdiv");
//Die mittlere Höhe entspricht der Seiteninhaltshöhe minus der DIV-Höhe geteilt durch 2
var Topwert = (Dokument.Body.ClientHeight - Divname.ClientHeight)/2;
divname.style.marginTop = oberster Wert;
}
// Wird ausgelöst, wenn sich die Seitengröße ändert
Fenster.onresize = cen;
</Skript>
</Kopf>
<body style="Höhe: 100 %; Breite: 100 %; Textausrichtung: Mitte;" onload=cen()>
<div id = "testdiv" name = "testdiv" style = "margin:0 auto; border:1px solid red; height:400px; width:400px;">
DIV-Zentrierungsdemonstration
</div>
</body>
</html>

Der dritte Typ: der einfachste und am besten anwendbare ist oben, unten, links und rechts zentriert und mit allen Browsern kompatibel

Code kopieren

Der Code lautet wie folgt:

Andere Methoden:
Pure CSS löst perfekt das Problem der vertikalen und horizontalen Zentrierung von Bildern in div, kompatibel mit IE7.0, IE6.0, IE5.5, IE5.0, FF, Opera, Safari
Nachfolgend der Programmcode

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<meta http-equiv="Inhaltstyp" content="text/html; charset=gb2312" />
<Titel></Titel>
<style type="text/css">
.img_v {
Anzeige: Tabellenzelle !wichtig;
Anzeige:Block;
Position: statisch !wichtig;
Position: relativ;
Überlauf: versteckt;
Breite: 400px;
Höhe: 400px;
Rand: 1px durchgezogen #000;
vertikale Ausrichtung: Mitte;
Textausrichtung: zentriert;
}
.img_v p {
Anzeige: Tabellenzelle !wichtig;
Anzeige:Block;
Rand: 0;
Position: statisch !wichtig;
Position: absolut;
oben: 50 %;
links: 50 %;
Breite: 400px;
Rand links: automatisch;
Rand rechts: automatisch;
}
.img_v img {
Position: statisch !wichtig;
Position: relativ;
oben:auto !wichtig;
oben: -50%;
links:auto !wichtig;
links: -50%;
}
</Stil>
</Kopf>
<Text>
<div Klasse="img_v">
<p><img src="upload/2022/web/logo.gif"></p>
</div>
</body>
</html>

<<: Informationen zur Layoutmethode für Inhaltsüberlauf in Tabellen

>>: MySQL-Daten einfügen, aktualisieren und löschen Details

Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.

Artikel

Horizontale und vertikale Zentrierung von DIV und Bildern, kompatibel mit mehreren Browsern

Details der MySQL-Berechnungsfunktion

Eine kurze Diskussion über zwei Methoden zum Erreichen einer halbtransparenten Hintergrundfarbe in CSS

Installieren Sie das komprimierte MySQL5.7-Paket schnell unter Windows

Detaillierte Erklärung der Beziehung zwischen React und Redux

So verstehen Sie die Modularität von JavaScript

Einführung in verschiedene Möglichkeiten zur Einführung von CSS in HTML

Wie viele gängige Schleifen zur Array-Traversierung in JS kennen Sie?

Detaillierte Erklärung zum ordnungsgemäßen Löschen einer großen Tabelle in MySQL

Zeichnen eines Feuerwerkseffekts von 2021 basierend auf JS mit Quellcode-Download

Analyse zur Lösung des Problems, dass Navicat Premium eine Verbindung zu MySQL 8.0 herstellt und den Fehler „1251“ meldet.

Artikel empfehlen

Detailliertes Tutorial zur Installation von mysql5.7.21 unter Windows

JavaScript implementiert drei gängige Webeffekte (Offset, Client, Scroll-Serie).

Zusammenfassung der Verwendung von TypeScript in React-Projekten

Beispiel zum Verlassen der Schleife in Array.forEach in js

Implementierung von React-Loop-Daten (Liste)

4 Möglichkeiten zum Anzeigen von Prozessen in LINUX (Zusammenfassung)

MySQL-FAQ-Serie: Wann werden temporäre Tabellen verwendet?

Detaillierte Erläuterung der Konstruktion der Lese-/Schreibtrennung bei der MySQL-Master-Slave-Replikation

Warum MySQL-Datenbanken NULL so weit wie möglich vermeiden

Zusammenfassung der wichtigsten Erkenntnisse des Vue-Entwicklungshandbuchs

WeChat Mini-Programm implementiert den Likes-Dienst

9 Tipps zur MySQL-Datenbankoptimierung

Zusammenfassung der React-Grundlagen

Designperspektive Technologie ist ein wichtiges Kapital der Designfähigkeit

Grafisches Tutorial zur Installation und Konfiguration von mysql 8.0.16 winx64.zip