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

Implementierung der Remote-Linux-Entwicklung mit vscode

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

Implementierung der Remote-Linux-Entwicklung mit vscode

Countdown-Effekt mit Javascript implementieren

Die heißesten Trends im Webdesign UI im Jahr 2013 Die beliebtesten UI-Designs

JavaScript imitiert Xiaomi-Karusselleffekt

Ein Artikel zum Verständnis der erweiterten Funktionen von K8S

Detaillierter Vue-Code zur Implementierung der Shuttle-Box-Funktion

Detaillierte Erklärung des Vue2 Cube-UI-Zeitwählers

Gründe und Methoden zum Warten auf die Sperre der Tabellenmetadaten in MySQL

So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON

Artikel empfehlen

So zeigen Sie Dateien im Docker-Image an

Verwenden von vue3, um den Nebennachrichten-Eingabeaufforderungseffekt des Apple-Systems zu imitieren

jQuery implementiert einen einfachen Kommentarbereich

Lösung für das Problem des achtstündigen Unterschieds bei der MySQL-Einfügezeit

Detaillierte Erläuterung der ersten Verwendung von Promise in der asynchronen JavaScript-Programmierung

Installation und Bereitstellung des MySQL Routers

Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching

Detaillierte Erläuterung des Falls der dynamischen Tabellengenerierung mit JavaScript

Beispielmethode zum Anzeigen der mit MySQL verbundenen IP-Adresse

JavaScript BOM-Standortobjekt + Navigatorobjekt + Verlaufsobjekt

Verwenden Sie href in HTML, um beim Klicken auf einen Link ein Dialogfeld zum Herunterladen von Dateien anzuzeigen.

Zusammenfassung der MySQL-Ansichtsprinzipien und Anwendungsbeispiele

So implementieren Sie Code und Schritte für den digitalen Paging-Effekt in CSS

Implementierung des Element-UI-Layouts (Zeilen- und Spaltenkomponenten)

Realisierung der Echtzeit-Dateisynchronisierung zwischen Linux-Servern