translate(-50%,-50%) in CSS erzielt horizontalen und vertikalen Zentrierungseffekt
|
translate(-50%,-50%)-Attribute: Anders als bei der Verwendung von margin zum Zentrieren muss margin seine eigene Breite und Höhe kennen, während translate zentriert werden kann, ohne die Breite und Höhe zu kennen. Der Prozentsatz in der tranlate-Funktion ist relativ zur Breite und Höhe. Beispiel:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<title>Dokument</title>
<style media="Bildschirm">
.container {
Position: relativ;
Breite: 50%;
}
.container img {
Breite: 100 %;
Anzeige: Block;
Höhe: automatisch;
}
.overlay {
Breite: 100 %;
Höhe: 100%;
Position: absolut;
links: 0;
oben: 0;
rechts: 0;
unten: 0;
Deckkraft: 0;
Übergang: 0,5 s Leichtigkeit;
Hintergrund: rgb(0, 0, 0);
}
.container:hover .overlay {
Deckkraft: 0,5;
}
.text {
Farbe: weiß;
Schriftgröße: 20px;
Position: absolut;
oben: 50 %;
links: 50%;
transformieren: übersetzen(-50 %, -50 %);
-ms-transform: übersetzen(-50 %, -50 %);
}
</Stil>
</Kopf>
<Text>
<h2>Einblendeffekt</h2>
<div Klasse="Container">
<img src="./img/photo2.jpg" alt="Avatar" class="Bild">
<div Klasse="Overlay">
<div class="text">Hallo Welt</div>
</div>
</div>
</body>
</html>Wirkung:
Dies ist das Ende dieses Artikels darüber, wie man mit Translate(-50 %, -50 %) in CSS eine horizontale und vertikale Zentrierung erreicht. Weitere Informationen zur horizontalen und vertikalen Zentrierung mit CSS Translate finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: HTML-Text in vertikalen Spalten anzeigen, um den Text in vertikalen Spalten anzuzeigen
>>: Eine Falle und Lösung bei der Verwendung von fileReader
Artikel empfehlen
Zusammenfassung der allgemeinen Funktionen von regulären Ausdrücken in PostgreSQL
Zusammenfassung der allgemeinen Funktionen von re...
Docker-Installationsmethode und detaillierte Erläuterung der vier Netzwerkmodi von Docker
1. Docker installieren yum -y install docker-io D...
WeChat-Applet-Beispiel für die direkte Verwendung von Funktionen in {{ }}
Vorwort Bei der WeChat-Applet-Entwicklung (native...
Analyse des benutzerdefinierten Überwachungs- und Alarmimplementierungsprozesses von Linux Zabbix
Ziel Zeigen Sie eine der Daten im iostat-Befehl i...
Zusammenfassung der Binlog-Nutzung der MySQL-Datenbank (unbedingt lesen)
Ich werde nicht näher darauf eingehen, wie wichti...
Die Standard-HTML-Schreibmethode unterscheidet sich von der von Dreamweaver automatisch generierten
Code kopieren Der Code lautet wie folgt: <!--d...
MySQL 8.0 kann jetzt JSON verarbeiten
Inhaltsverzeichnis 1. Kurzübersicht 2. JSON-Grund...
Lösungen für Probleme bei der Verwendung von addRoutes in Vue-Projekten
Inhaltsverzeichnis Vorwort 1. 404 Seite 1. Ursach...
Implementierungscode für die HTML-Tabellenrahmensteuerung
Wenn wir eine Tabelle verwenden, weisen wir ihr i...
HTML+CSS-Implementierungscode für abgerundete Rechtecke
Mir war langweilig und plötzlich fiel mir die Impl...
WeChat Mini-Programm implementiert den Likes-Dienst
In diesem Artikel wird der spezifische Code für d...
Docker-Container vom Einstieg bis zur Obsession (empfohlen)
1. Was ist Docker? Jeder kennt virtuelle Maschine...
Praxis der Linux-Datei- und Benutzerverwaltung
1. Zeigen Sie die Dateien oder Verzeichnisse im V...
Vue-Direktiven v-html und v-text
Inhaltsverzeichnis 1. Anweisungen zum Rendern von...
Lösung für die Meldung „Die exklusive Sperre dieser Konfigurationsdatei ist fehlgeschlagen“ auf der virtuellen VMware-Maschine
Nach einem abnormalen Herunterfahren von VMware w...