Ich habe eine Demo für Ihr at: Ссылка
eingerichtetIch habe Ihr CSS ein kleines bisschen vereinfacht und etwas Hintergrundfarbe und Padding hinzugefügt.
Sie müssen die vertical-align -Eigenschaft auf alle Inline-Elemente anwenden, die Sie ausrichten möchten.
Die Eigenschaft vertical-align wird nicht vererbt, Sie müssen sie also auf alle relevanten Elemente anwenden.
Sie können Padding und Ränder anwenden, um den Abstand zwischen dem Text und dem Bild zu steuern.
Sie können etwas experimentieren, indem Sie line-height des Containers p anpassen und auch andere Ausrichtungswerte wie oben, unten, Grundlinie ausprobieren.
Dieser Trick ist es wert, gemeistert zu werden, weil er ein Schlüsselkonzept davon berührt, wie das CSS-Box-Modell funktioniert, und dieses Muster ist sehr üblich, also ein guter Trick in Ihrer CSS-Toolbox.
Hier ist ein kurzes Beispiel:
Sie können die Werte einfach an Ihre Bedürfnisse anpassen.
Ich habe gerade ein Wrapper div um das Bild und den Bereich wrap
Dann fügte das im CSS hinzu:
%Vor% vertical-align: middle funktioniert nicht für Elemente mit display: block . Machen Sie sie display: inline wenn möglich oder display: table-cell falls nicht.
Auch Ссылка könnte helfen.