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

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:

<div style="position:absolute; oben:50%; Höhe:240px;Rahmen:1px durchgehend rot; Rand:0 automatisch; oberer Rand:-120px; Breite:300px; links:50%; linker Rand:-150px;"></div>

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

Artikel empfehlen

Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

Heute ist mir plötzlich eingefallen, dass es cool ...

So verwenden Sie die HTML-Formularattribute „schreibgeschützt“ und „deaktiviert“

1. readonly Nur-Lese-Attribut, so dass Sie den Wer...

vsCode generiert Vue-Vorlagen mit einem Klick

1. Verwenden Sie die Tastenkombination Strg + Ums...

Detaillierte Schritte zum Verpacken und Hochladen von Spring Boot in ein Docker-Repository

Wichtiger Hinweis: Bevor Sie diesen Artikel lesen...

So verwenden Sie Docker-Compose zum Erstellen eines ELK-Clusters

Auf alle Orchestrierungsdateien und Konfiguration...

Nginx verbietet den direkten Zugriff über IP und leitet auf eine benutzerdefinierte 500-Seite weiter

Direkt zur Konfigurationsdatei Server { listen 80...

CSS löst das Problem der Front-End-Bildverformung perfekt

Ich habe in der Toutiao IT School einen Artikel g...

Verwenden einer MySQL-Datenbank mit Python 3.4 unter Windows 7

Der detaillierte Prozess der Verwendung der MySQL...

MySQL-Datenbankterminal – allgemeine Befehlscodes für Vorgänge

Inhaltsverzeichnis 1. Benutzer hinzufügen 2. Ände...

Grundlegende Verwendung der JS-Datumssteuerung My97DatePicker

My97DatePicker ist ein sehr flexibles und benutze...

So richten Sie die passwortfreie SSH-Anmeldung beim Linux-Server ein

Bei jeder Anmeldung am Testserver ist grundsätzli...

Detaillierte Erklärung der Beziehung zwischen React und Redux

Inhaltsverzeichnis 1. Die Beziehung zwischen Redu...

Eine kurze Diskussion über den magischen Schrägstrich im Nginx Reverse Proxy

Beim Konfigurieren des Nginx-Reverse-Proxys könne...

Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können

Der Unterschied zwischen „Ersetzen durch“ und „Ei...

So verwenden Sie den Geometrietyp von MySQL, um Längen- und Breitengrad-Distanzprobleme zu bewältigen

Erstellen einer Tabelle CREATE TABLE `map` ( `id`...