Zentrieren Sie ein Div vertikal, wenn Sie „Shape-outside“ verwenden ⇐ JavaScript

[Guest]

Ich versuche diesen Effekt zu erzielen, indem der Text den Umriss des Bildes umschließt, aber auch zentriert ist
Das Problem besteht darin, dass man „shape-outside: url()“ verwenden kann. um den Text umzubrechen, muss ich das Bild schweben lassen, was bedeutet, dass das übergeordnete Element weder flexibel noch gitterförmig sein kann. Das macht es schwierig, die Elemente vertikal zu zentrieren.
Ich habe versucht, top: 50% zu verwenden und dann y um -50 % zu verschieben, aber das übersetzt den Formpfad nicht dass der Text umbrochen wird.

Code: Select all

top

scheint keine Wirkung zu haben, und andere Vorschläge wie display:table und Vertical-align:middle unterbrechen den benötigten Float.
Nur a etwas hängengeblieben. Ich würde nur CSS bevorzugen, bin aber bei Bedarf auch mit JS zufrieden. Für jede Hilfe wäre ich dankbar!
Was ich suche:
[img]https:/ /i.sstatic.net/Z4M5btom.png[/img]

Was ich derzeit habe:

Code: Select all

.shape-outside {
shape-outside: url(https://9gdz2scbii.ufs.sh/f/zWQ2Yd3CAlqfqpqn7xOJVXdr2TwsUaM9xB8kENtWjbYcPCoz);
shape-margin: 25px;
display: flow-root;
}

Code: Select all

[img]https://9gdz2scbii.ufs.sh/f/zWQ2Yd3CAlqfqpqn7xOJVXdr2TwsUaM9xB8kENtWjbYcPCoz[/img]

a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a a