Pre-flex, dynamische vertikale Ausrichtung war einer der Hauptprobleme von CSS, also ohne sie (oder JS), was Sie verlangen, ist unmöglich. Wenn JS eine Option ist, können Sie den Abstand dynamisch anpassen (ES6, weil er im Browser shape-outline funktioniert):
BEARBEITEN Aktualisieren Sie die Machbarkeit gängiger CSS-Zentrierungsmethoden:
Wie in den MDN-Dokumenten angegeben, gilt shape-outside nur für floated-Elemente. Dies würde bedeuten, dass der Text im Fluss bleiben muss mit dem Element, auf das Sie das Shaping anwenden möchten. Soweit ich das beurteilen kann, beschränkt dies Sie nur auf die Interaktion mit den Eigenschaften margin und padding , da die Positionierung den Textfluss beeinflusst. Da die Höhe in Ihrem Textblock nicht festgelegt ist, können Sie diesen Wert nicht in calc property verwenden. Kurz gesagt, Ihr Textcontainer muss statisch positioniert sein und display: block .
Textumbruch wird vor position: relative und transform berechnet, daher sind diese nicht sinnvoll.
In Tabellenzellen wird der gesamte Inhalt einer Zelle als einzelner Block (zum Zentrieren) behandelt, sodass der Text an der Spitze des Kreises ausgerichtet ist, der vertikal zentriert ist.
Dies würde scheinbar jede vertikale CSS-Zentrierungsmethode als einen Kandidaten eliminieren (von dem ich weiß).
%Vor%Es ist von meiner Seite gelöst. Ich habe das alte klassische Tabellenstrukturlayout angewendet, indem ich display: table auf parent anwende und display: table-cell und vertical-align: middle zu child divs.
%Vor%Dies war nur die bevorzugte Lösung von meinem Ende! Hoffe, das funktioniert!
Sie können transform: translate(0%, -50%); verwenden, um sie vertikal in der Mitte zu platzieren.
Sie können dies auch in Fiddle
nachsehenTags und Links css vertical-alignment circle