suchen
HeimWeb-FrontendCSS-TutorialWie richtet man Inline-/Inline-Block-Elemente innerhalb eines Div vertikal aus?

How to Vertically Align Inline/Inline-Block Elements Within a Div?

Vertikale CSS-Ausrichtung von Inline-/Inline-Block-Elementen

Beim Versuch, Inline- oder Inline-Block-Elemente innerhalb eines Divs vertikal auszurichten, ist dies der Fall Es ist wichtig zu beachten, dass sich die Eigenschaft „vertikal ausrichten“ auf die untergeordneten Elemente und nicht auf das übergeordnete Element bezieht. Im bereitgestellten HTML und CSS verschiebt sich die Spanne aufgrund der vertikalen Ausrichtung, die auf das div-Element angewendet wird, hartnäckig nach unten.

Um die Elemente richtig vertikal auszurichten, wenden Sie die Vertical-Align-Eigenschaft auf die untergeordneten Elemente innerhalb des div an :

div > * {
    vertical-align: middle;  // Align children to middle of line
}

Diese Änderung stellt sicher, dass alle Inline- und Inline-Block-Elemente innerhalb des Div wie beabsichtigt vertikal ausgerichtet werden: [https://jsfiddle.net/dfmx123/TFPx8/1186/](https://jsfiddle.net/dfmx123/TFPx8/1186/)

Zusätzlicher Hinweis:

Die vertikale Ausrichtung bezieht sich auf die aktuelle Textzeile, nicht auf die Höhe des übergeordneten Div. Um eine vertikale Zentrierung innerhalb eines Divs zu erreichen, das höher als die ausgerichteten Elemente ist, legen Sie die Eigenschaft „line-height“ des Divs anstelle seiner Höhe fest. Eine Demonstration finden Sie im aktualisierten bereitgestellten JSFiddle-Beispiel.

Das obige ist der detaillierte Inhalt vonWie richtet man Inline-/Inline-Block-Elemente innerhalb eines Div vertikal aus?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Die @Apply -Funktion von Rückenwind ist besser als es klingtDie @Apply -Funktion von Rückenwind ist besser als es klingtApr 23, 2025 am 09:23 AM

Meistens präsentieren die Leute die @Apply-Funktion mit einer der einzelnen Properschafts-Dienstprogramme von Rückenwind (die eine einzelne CSS-Deklaration ändert). Wenn @Apply auf diese Weise präsentiert wird, klingt er überhaupt nicht vielversprechend. Also obvio

Ich habe das Gefühl, dass ich keine Veröffentlichung habe: eine Reise in Richtung vernünftiger BereitstellungenIch habe das Gefühl, dass ich keine Veröffentlichung habe: eine Reise in Richtung vernünftiger BereitstellungenApr 23, 2025 am 09:19 AM

Das Bereitstellen wie ein Idiot hängt von einer Missverhältnis zwischen den Tools, mit denen Sie zur Bereitstellung verwendet werden, und der Belohnung in der Komplexität im Vergleich zu Komplexität hinzu.

Sie möchten also CSS vor- und Postprozessoren aufgeben ...Sie möchten also CSS vor- und Postprozessoren aufgeben ...Apr 23, 2025 am 09:18 AM

Es gab einmal, in der einheimische CSS viele wesentliche Merkmale fehlten, sodass Entwickler alle möglichen Möglichkeiten entwickeln, um CSS im Laufe der Jahre einfacher zu schreiben.

Ein neuer Bereitschaftsbericht 'Web'Ein neuer Bereitschaftsbericht 'Web'Apr 23, 2025 am 09:14 AM

Die HTML 5 -Bereitschaft war eine Website, die durch einen Regenbogen von Farben den Browser -Unterstützung für mehrere Webfunktionen zeigte. Was ist mit einer neuen Version?

Starke DX mit Astro -Komponenten und Typenkripten erstellenStarke DX mit Astro -Komponenten und Typenkripten erstellenApr 23, 2025 am 09:10 AM

Eine Sache, die wir tun können, um dem Teams-Code konsequent zu helfen, ist die Bereitstellung von Typ-Überprüfungen, damit alle konfigurierbaren Optionen für eine bestimmte Komponente während der Codierung verfügbar sind. Bryan zeigt, wie er dies mit TypeScript macht, wenn er mit Astro Comp arbeitet

Simulation der MausbewegungSimulation der MausbewegungApr 22, 2025 am 11:45 AM

Wenn Sie jemals eine interaktive Animation während eines Live -Vortrags oder einer Klasse anzeigen mussten, wissen Sie vielleicht, dass es nicht immer einfach ist, mit Ihren Folien zu interagieren

Suchen Sie die Suche mit Astro -Aktionen und Fuse.jsSuchen Sie die Suche mit Astro -Aktionen und Fuse.jsApr 22, 2025 am 11:41 AM

Mit Astro können wir während unseres Builds den größten Teil unserer Website generieren, verfügen jedoch über ein kleines Stück serverseitiger Code, mit dem Suchfunktionen mithilfe von so etwas wie Fuse.js. In dieser Demo werden wir Fuse verwenden, um eine Reihe persönlicher "Lesezeichen" zu durchsuchen.

Undefiniert: der dritte boolesche WertUndefiniert: der dritte boolesche WertApr 22, 2025 am 11:38 AM

Ich wollte eine Benachrichtigungsnachricht in einem meiner Projekte implementieren, ähnlich wie in Google Docs, während ein Dokument speichert. Mit anderen Worten, a

See all articles

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

Video Face Swap

Video Face Swap

Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heiße Werkzeuge

MinGW – Minimalistisches GNU für Windows

MinGW – Minimalistisches GNU für Windows

Dieses Projekt wird derzeit auf osdn.net/projects/mingw migriert. Sie können uns dort weiterhin folgen. MinGW: Eine native Windows-Portierung der GNU Compiler Collection (GCC), frei verteilbare Importbibliotheken und Header-Dateien zum Erstellen nativer Windows-Anwendungen, einschließlich Erweiterungen der MSVC-Laufzeit zur Unterstützung der C99-Funktionalität. Die gesamte MinGW-Software kann auf 64-Bit-Windows-Plattformen ausgeführt werden.

VSCode Windows 64-Bit-Download

VSCode Windows 64-Bit-Download

Ein kostenloser und leistungsstarker IDE-Editor von Microsoft

Sicherer Prüfungsbrowser

Sicherer Prüfungsbrowser

Safe Exam Browser ist eine sichere Browserumgebung für die sichere Teilnahme an Online-Prüfungen. Diese Software verwandelt jeden Computer in einen sicheren Arbeitsplatz. Es kontrolliert den Zugriff auf alle Dienstprogramme und verhindert, dass Schüler nicht autorisierte Ressourcen nutzen.

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

SublimeText3 Englische Version

SublimeText3 Englische Version

Empfohlen: Win-Version, unterstützt Code-Eingabeaufforderungen!