Ü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 aktivieren Sie Flash in Windows Server 2016

Ich habe vor Kurzem VMware Horizon bereitgestellt...

4 Scan-Tools für den Linux-Desktop

Obwohl die papierlose Welt noch nicht angebrochen...

Schritte zum Erstellen eines WEBSERVERS mit NODE.JS

Inhaltsverzeichnis Was ist nodejs Installieren Si...

Vue.js verwaltet die Kapselung von Hintergrundtabellenkomponenten

Inhaltsverzeichnis Problemanalyse Warum Kapselung...

Docker stellt MySQL bereit, um Beispielcode für eine Remoteverbindung zu erreichen

1. Docker durchsucht MySQL查看mysql版本 2. Docker Pul...

So installieren Sie Nginx in Docker

Installieren Sie Nginx auf Docker Nginx ist ein l...

Eclipse konfiguriert Tomcat und Tomcat hat eine ungültige Port-Lösung

Inhaltsverzeichnis 1. Eclipse konfiguriert Tomcat...

Einführung in semantische HTML-Tags

In den letzten Jahren war DIV+CSS bei der Website-...

Grundlegende Syntax des MySQL-Index

Ein Index ist eine sortierte Datenstruktur! Die F...

Detaillierte Erklärung der grundlegenden Typen von TypeScript

Inhaltsverzeichnis Boolescher Typ Nummerntypen Ze...

Der Implementierungsprozess der Linux-Prozessnetzwerkverkehrsstatistik

Vorwort Linux verfügt über entsprechende Open-Sou...