Ü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

Windows 2019 Aktivierungs-Tutorial (Office2019)

Vor ein paar Tagen habe ich erfahren, dass die of...

MySQL-Anweisungsanordnung und zusammenfassende Einführung

SQL-Anweisungen (Structured Query Language), also...

Tutorial zur Installation von VMware Workstation 14 Pro unter Ubuntu 16.04

In diesem Artikel wird die spezifische Methode zu...

Beispielcode zur Implementierung einer Hohlmaskenebene mit CSS

Inhalt dieses Artikels: Seitenhohlmaskenebene, Se...

Detaillierte Erklärung von MySQLs Seconds_Behind_Master

Inhaltsverzeichnis Sekunden_hinter_Master Ursprün...

Ausführliche Erläuterung zum MySQL-Lernen einer Datenbanksicherung

Inhaltsverzeichnis 1.DB, DBMS, SQL 2. Eigenschaft...

Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

1. W3C-Versionen von Flex Version 2009 Flag: Anze...

Detaillierte Erklärung zum Upgrade von Softwarepaketversionen unter Linux

Im Linux-Umfeld möchten Sie prüfen, ob eine besti...

Ursachen und Lösungen für Verzögerungen bei der MySQL Master-Slave-Replikation

Inhaltsverzeichnis Ein kurzer Überblick über die ...

Was sind die Dateiattribute von crw, brw, lrw usw. in Linux?

Was ist eine Datei? Eigentlich sind alle Dateien ...