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)

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

Artikel

So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)

Artikel

Detaillierte Erklärung zur Bereitstellung von Elasticsearch Kibana und IK Word Segmenter im Docker

Artikel empfehlen

So zeigen Sie Bildinformationen in Docker an

In diesem Artikel müssen wir lernen, wie man Bild...

Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung

Zunächst lautet der HTML-Code zum Einbetten des Vi...

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

Installationsschritte für die chinesische Eingabemethode von Ubuntu 20.04

So beheben Sie den Fehler beim Herstellen einer Verbindung zu MySQL unter Linux: Zugriff für Benutzer „root“@„localhost“ verweigert (mit Kennwort: JA)

Detaillierte Erklärung zur Bereitstellung von Elasticsearch Kibana und IK Word Segmenter im Docker

MySQL-Dateneinfügungsoptimierungsmethode concurrent_insert

Ideen zum Erstellen von Welleneffekten mit CSS

Webdesign-Prinzipien für Hyperlinks

Zusammenfassung eines CSS-Codes, der die gesamte Site grau macht

Detaillierte Erläuterung der Hosts-Dateikonfiguration auf einem Linux-Server

Warum ist der Speicherplatz nach dem Löschen von Tabellendaten in MySQL immer noch belegt?

So fügen Sie eine Popup-Aktionsschaltfläche unten für „Select“ und „Cascader“ von Element-UI hinzu

Artikel empfehlen

So zeigen Sie Bildinformationen in Docker an

Detaillierte Erläuterung des Beispiels zum Einbetten von Videos in eine HTML-Seite und zum Umschalten von Videos mit JS-Steuerung

Detailliertes Tutorial zur Installation und Verwendung von MySQL 8.0.15 unter Windows

Heute bin ich auf ein sehr seltsames Problem gestoßen und habe es selbst gelöst

JS ermittelt die Position des n-ten Vorkommens einer angegebenen Zeichenfolge in einer Zeichenfolge

Detaillierte Erklärung des Vue-Slots

Was tun, wenn Sie das ursprüngliche Passwort für MySQL auf dem MAC vergessen?

Detaillierte Erläuterung der drei Möglichkeiten zum Schneiden von Catalina.out-Protokollen in Tomcat

Implementierung einer verschiebbaren Komponente zum Teilen des linken und rechten Bedienfelds in Vue3

Keep-Alive-Multilevel-Routing-Cache-Problem in Vue

CSS realisiert die Szenenanalyse von halbtransparenten Rändern und Mehrfachrändern

Setzen Sie das Attribut „contenteditable“, um den Inhalt von HTML-Tags zu bearbeiten (kann Textarea ersetzen).

11 Gründe, warum Bootstrap so beliebt ist

HTML-Tutorial: Titelattribut und Alt-Attribut

Detaillierte Analyse des Problems der Groß-/Kleinschreibung von Bezeichnern in MySQL