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

Kennen Sie die seltsamen Dinge in Javascript?

Unsere erfahrenen Vorgänger haben zahllose Codes ...

So verwenden Sie den Linux-Befehl whatis

01. Befehlsübersicht Der Befehl whatis sucht in e...

Tutorial zur Installation von MYSQL5.7 aus dem OEL7.6-Quellcode

Laden Sie zunächst das Installationspaket von der...

Beispielschritte zur Verwendung von AntV X6 mit Vue.js

Inhaltsverzeichnis 0x0 Einführung 0x1 Installatio...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.15 sowie zur Kennwortänderung unter Linux

Ich habe diesen Blog geschrieben, um mich daran z...

Mehrere Situationen, die dazu führen, dass MySQL einen vollständigen Tabellenscan durchführt

Inhaltsverzeichnis Fall 1: Fall 2: Fall 3: Um es ...

Verwenden Sie die Renderfunktion, um hoch skalierbare Komponenten zu kapseln

brauchen: In der Hintergrundverwaltung gibt es hä...

Installations-Tutorial zur komprimierten Version von MySQL 8.0.11

In diesem Artikel finden Sie das Installations-Tu...

Prozessdiagramm für das erste Bereitstellungs-Webprojekt von Tomcat

Legen Sie Ihr eigenes Webprojekt im Verzeichnis w...

Zusammenfassung der bei der Installation von Docker auf der Home-Version von Win10 aufgetretenen Probleme

Docker-Download-Adresse: http://get.daocloud.io/#...

Prinzip des Ausblendens von CSS-Elementen und display:none und visibility:hidden

1. CSS-Elemente verbergen <br />In CSS gibt ...

Ein vollständiges Beispiel für die mehrstufige Sprungfunktion (Seiten-Drilldown) von Vue für verwandte Seiten

Hintergrund Während des Projektentwicklungsprozes...

Sehr empfehlenswert! Syntax Sugar in Vue 3.2 einrichten

Inhaltsverzeichnis Vorherige 1. Was ist Setup-Syn...

Aufrufen und Ausführen von Host-Docker-Operationen im Docker-Container

Zunächst einmal ist dieser Beitrag Docker-Neuling...

Html+css, um reinen Text und Schaltflächen mit Symbolen zu erreichen

Dieser Artikel fasst die Implementierungsmethoden...