Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining

Heute hatte ich etwas Freizeit, um eine Website für meine eigene Homepage zu schreiben, die mit allen Browsern kompatibel ist (hauptsächlich IE 9 und höher und Chrome). Es gibt ein früheres Problem, das auch ein sehr häufiges Problem ist. Da ich darauf gestoßen bin, kann ich es genauso gut aufzeichnen. Schauen wir uns die Frage direkt an

<!DOCTYPE html>
<html>
<Kopf>
<meta charset="utf-8">
<title>Dokumenttitel</title>
</Kopf>
<Text>
	<div Klasse="aaa">
      <div>
        
      </div>
  </div>
</body>
</html>
<Stil>
.aaa{
 	 Breite: 700px;
 	 Höhe: 500px;
 	 Position: absolut;
	 Hintergrundfarbe: rot;
  	 Anzeige: Flex;
  	 Elemente ausrichten: zentrieren;
}
.aaa div{
  	Höhe: 200px;
  	Breite: 200px;
  	Position: absolut;
 	Hintergrundfarbe: gelb;		
}
</Stil>

Voraussetzung: Das Unterelement muss horizontal zentriert sein, in vertikaler Richtung ist jedoch position:absolute erforderlich. Wenn position:relative oder其他erforderlich ist, ist dies in ie oder chrome dasselbe, und子元素width中點wird als Basispunkt verwendet.

Im IE: Die Eigenschaften im übergeordneten Container: display: flex;align-items: center; sind horizontal zentriert, aber der Basispunkt ist左上角, wie in der folgenden Abbildung gezeigt. Wenn Sie es horizontal zentrieren möchten, müssen Sie Folgendes hinzufügen: transform:translateX(-50%) . Dies bedeutet左移動自身width的50% . Der Vorteil besteht darin, dass es keine Rolle spielt, ob Sie die Breite des Elements kennen oder nicht.

Chrome: Eigenschaften im übergeordneten Container: display: flex;align-items: center; das untergeordnete Element direkt horizontal zentrieren, wobei der Basispunkt子元素width的中點und nicht ie中的左上角ist;

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Vollständige Schritte zum Erstellen eines Hochleistungsindex in MySQL

>>: So ändern Sie den Standardspeicherort von Docker-Images (Lösung)

Detaillierte Erläuterung der Hinweise zum Flex- und Positionskompatibilitäts-Mining

Nexus nutzt API für den Betrieb

Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl

So fragen Sie doppelte Daten in einer MySQL-Tabelle ab

Beispielcode zur Implementierung eines 3D-Bucheffekts mit CSS

So fragen Sie Datum und Uhrzeit in MySQL ab

Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)

Tomcat-Quellcodeanalyse und -Verarbeitung

Reines CSS3 zur Erzielung einer Mouseover-Schaltflächenanimation, Teil 2

Datenbank löschen und weglaufen? So sichern Sie die MySQL-Datenbank mit xtraback

CentOS 6 verwendet Docker, um ein Beispiel für den Betrieb einer Redis-Master-Slave-Datenbank bereitzustellen

Artikel empfehlen

Mehrere Situationen, in denen Div durch Iframe abgedeckt ist, und ihre Lösungen

Detaillierte Erklärung zur Verwendung von MySQL-Gruppenlinks

Datenabfragevorgang im MySQL-JSON-Format

Zusammenfassung der Verzögerungen der MySQL-Slave-Bibliothek „Seconds_Behind_Master“

Verwenden von Vue3 (Teil 1) Erstellen eines Vue CLI-Projekts

Verwenden von js zum Implementieren der bidirektionalen Bindungsfunktion von Daten in Vue2.0

JS+CSS zur Realisierung einer dynamischen Uhr

So passen Sie die Höhe eines Divs an die Höhe des Browsers an

Docker installiert MySQL und löst das chinesische verstümmelte Problem

Spezifische Verwendung von Bootstrap5-Haltepunkten und Containern

So fragen Sie doppelte Daten in einer MySQL-Tabelle ab

Vue echarts realisiert horizontales Balkendiagramm

MySQL-Joinpufferprinzip

Verwenden der Better-Scroll-Komponente in Vue zum Realisieren der horizontalen Scrollfunktion

CSS-Namenskonventionen (Regeln), die es wert sind, gesammelt zu werden Häufig verwendete CSS-Namensregeln