Wie kann ich CSS verwenden, um den Text vertikal in einem Anker innerhalb einer LI zu zentrieren?
Variationen zu dieser Frage wurden oft gestellt. Vertikales Zentrieren mit CSS ist eine Herausforderung.
Ich habe ein bestimmtes Szenario mit einer horizontal angezeigten Liste. Das Markup ist wie folgt:
%Vor%Der Stil ist wie folgt:
%Vor%Die resultierende Liste sieht folgendermaßen aus:
Aber ich möchte, dass alle Felder die gleiche Höhe haben und ich möchte, dass der Text in jeder Box vertikal zentriert ist. Ich kann die Boxhöhe einstellen, indem ich einen height Stil für die A-Elemente hinzufüge. Das Ergebnis sieht folgendermaßen aus:
... was genau meinen Wünschen entspricht, aber die vertikale Zentrierung findet nicht statt.
Ich kann line-height für den Text festlegen, wie in diesem Beitrag vorgeschlagen , um die vertikale Zentrierung zu machen. Ich kann sogar verschiedene Werte von line-height für verschiedene A-Elemente auswählen, wenn ich weiß, welches der Elemente mehrere Textzeilen erhält. Aber ich weiß nicht, welche mehrere Zeilen benötigen.
Wie kann ich es zentrieren, wenn einige der A-Elemente Text enthalten, der umgebrochen wird?
4 Antworten
Sie könnten display:table usw. zusammen mit vertical-align:middle
Beispiel: Ссылка
Alte Frage, aber die Antwort kann jetzt mit Flexbox aktualisiert werden.
%Vor% Ich habe keine Möglichkeit gefunden, dies in CSS zu tun. Ich fand, dass ich tun konnte, was ich brauchte mit Javascript, indem ich die padding-top und padding-bottom zur Laufzeit auf die entsprechenden Werte setzte. Die Technik besteht darin, die "natürliche" Höhe des A-Elements zu messen und dann das Padding so einzustellen, dass das A-Element vertikal zentriert ist.
Hier ist der notwendige js-Code:
%Vor%Im CSS darf die Höhe oder der Abstand für die A-Elemente nicht explizit festgelegt werden. Dies würde dazu führen, dass die "natürliche" Höhe nicht das ist, was wir brauchen.
Das Ergebnis ist wie folgt:
Um es in Aktion zu sehen, gehen Sie hier .
In der CSS haben Sie die Höhe und die Zeilenhöhe gleich gesetzt. Dann bekommst du eine rechteckige Box.
Aber Sie sehen immer noch Platz in der Unterseite der Grund ist aufgrund der Auffüllung
das Hinzufügen von zwei Werten im Padding fügt das obere und untere Padding hinzu
padding: oben unten;
da es 2 und 12 ist, sehen Sie sehr viel Platz.
probiere das
aus %Vor%lassen Sie mich wissen, dass es funktioniert
Tags und Links css vertical-alignment