Dieses Mal zeige ich Ihnen, wie Sie img und span in einem div vertikal zentrieren. Was sind die Vorsichtsmaßnahmen für die vertikale Zentrierung von img und span in einem div?
<html>
<head>
<style>
#test *{vertical-align:middle;}
</style>
<body>
<div
id="test">
<img
src="http://127.0.0.1:7001/wsc/images/message.png"/>
<span>sdfhsdhfdksfjhtes:</span>
</div>
</body>
</html>Bitte beachten Sie: #test *{vertical-align:middle;}s
#test * repräsentiert alle Elemente im div, einschließlich span, input und img Connected-Elemente .
vertical-align
Anfangswert: baseline (Standardwert)
Vererbbar: Nein
Anwendbar auf: Inline-Elemente
Beschreibung: Vertical-align: baseline macht das Element Die Grundlinie ist an der Grundlinie des übergeordneten Elements ausgerichtet.
Warnung: Vertical-Align hat keinen Einfluss auf die Ausrichtung von Inhalten in Tabellenzellen, und das Gleiche gilt für Inhalte in Blockelementen.
Bitte beachten Sie: Vertical-Align betrifft nur Inline-Elemente wie span, img, em, input, a usw., ist jedoch für Blockelemente wie div, h3, p usw. ungültig.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So verwenden Sie den SSE-Server von h5 zum Senden von EventSource-Ereignissen
Details zum lokalen Speicher und zur lokalen Datenbank von H5 Einführung
Verwendung von H5 und C3 zur Implementierung eines einfachen Takteffekts
Das obige ist der detaillierte Inhalt vonWie kann ich img und span in einem Div vertikal zentriert machen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Die Funktion des Span-Tags
Der Unterschied zwischen div und span
Wie lösche ich den Speicherplatz für WPS-Cloud-Dokumente, wenn er voll ist?
Zu den Kerntechnologien des Big-Data-Analysesystems gehören:
Welche Datei ist windows.old?
Edge-Browser-Kompatibilitätseinstellungen
Neueste Bitcoin-Kurse
Computer-Bluescreen-Code 0xc0000225
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
