Über das Problem der vertikalen Zentrierung von img und span in div

Über das Problem der vertikalen Zentrierung von img und span in div

Wie unten dargestellt:

XML/HTML-CodeInhalt in die Zwischenablage kopieren
  1. < html >   
  2. <Kopf>   
  3. < Stil >   
  4. #test *{vertical-align:middle;}
  5. </ Stil >   
  6. < Textkörper >   
  7. < div   
  8. id = "Test" >   
  9. < img   
  10. src = "http://127.0.0.1:7001/wsc/images/message.png" />   
  11. < span > sdfhsdhfdksfjhtes: </ span >   
  12. </div>   
  13. </ Körper >   
  14. </ html >   

Bitte beachten: #test *{vertical-align:middle;}s

#test * stellt alle Elemente im div dar, einschließlich Inline-Elemente wie span, input und img.

vertikale Ausrichtung
Anfangswert: Baseline (Standardwert)
Vererbbar: Nein. Anwendbar auf: Inline-Elemente. Beschreibung: vertical-align:baseline richtet die Grundlinie des Elements an der Grundlinie des übergeordneten Elements aus.
Achtung: Die vertikale Ausrichtung wirkt sich weder auf die Ausrichtung des Inhalts innerhalb von Tabellenzellen noch auf die Ausrichtung des Inhalts innerhalb von Blockelementen aus.

Bitte beachten: Die vertikale Ausrichtung wirkt sich nur auf Inline-Elemente wie span, img, em, input, a usw. aus, ist jedoch für Blockelemente wie div, h3, p usw. ungültig.

Oben finden Sie alle Inhalte zum Problem der vertikalen Zentrierung von img und span in div, die Ihnen vom Herausgeber zur Verfügung gestellt wurden. Ich hoffe, dass sie Ihnen helfen werden. Bitte unterstützen Sie 123WORDPRESS.COM~

<<:  3 Lösungen, damit Ihre Website alte Versionen der Browser IE6, 7, 8 und 9 unterstützt

>>:  Ladeanimation mit CSS3 implementiert

Artikel empfehlen

So verstehen Sie die JS-Funktion Anti-Shake und Funktionsdrosselung

Inhaltsverzeichnis Überblick 1. Funktion Entprell...

Linux IO-Multiplexing Epoll-Netzwerkprogrammierung

Vorwort In diesem Kapitel werden grundlegende Lin...

So importieren Sie eine JS-Konfigurationsdatei auf den Vue-Server

Inhaltsverzeichnis Hintergrund erreichen Ergänzun...

Beispielcode von layim zum Integrieren des Rechtsklickmenüs in JavaScript

Inhaltsverzeichnis 1. Wirkungsdemonstration 2. Im...

Ein auf Vue-cli basierender Codesatz unterstützt mehrere Projekte

Inhaltsverzeichnis Anwendungsszenario Ideen Proje...

Detaillierte Erklärung der Rolle von Explain in MySQL

1. MySQL-Index Index: Eine Datenstruktur, die MyS...

Ein kurzes Verständnis des Unterschieds zwischen MySQL Union All und Union

Union ist eine Vereinigungsoperation für die Date...

React-Tipps zeigen Ihnen, wie Sie Probleme mit Hook-Abhängigkeiten beseitigen

Ein sehr häufiges Szenario in react -Projekten: c...

CSS: besuchte geheime Erinnerungen des Pseudoklassenselektors

Gestern wollte ich a:visited verwenden, um die Fa...

Ein kurzer Vortrag über die Variablenförderung in JavaScript

Inhaltsverzeichnis Vorwort 1. Welche Variablen we...

Zusammenfassung der Unterschiede zwischen Get- und Post-Anfragen in Vue

Die Betriebsumgebung dieses Tutorials: Windows 7-...

HTML-Tabellen-Tag-Tutorial (46): Tabellenfußzeilen-Tag

Mit dem Tag <tfoot> wird der Stil der Tabel...