Wie Links in einer Grid-Liste alle auf gleiche Höhe und vertikal zentriert bekommen?

[Felix Riesterer]

Liebe Mitlesende,

eine Optionenliste enthält Links:

<ul id="options">
  <li><a href="#A">A</a></li>
  <li><a href="#B">B</a></li>
  <li><a href="#C">C - mit viel langem und störendem Text dazu gekleistert, damit's auch wirklich umbricht</a></li>
  <li><a href="#D">D</a></li>
</ul>

Die Liste ist per Grid-Layout einzeilig auf vier Spalten (bei schmaleren Viewports 2x2) gesetzt. Wie erreiche ich, dass die Links jeweils die volle Höhe der li-Elemente erhalten und dabei auch noch vertikal zentriert sind? Muss ich dazu die a-Elemente auf display:flex setzen, oder geht das auch mit dem ursprünglichen Grid?

[jsFiddle]

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

Wie erreiche ich, dass die Links jeweils die volle Höhe der li-Elemente erhalten und dabei auch noch vertikal zentriert sind?

Als Lehrer solltest Du wissen: die richtige Frage ist schon die halbe Antwort. 😉

Wenn die a Elemente die volle Höhe der li Elemente haben, dann sind sie automatisch vertikal zentriert. Weil kein Platz mehr da ist, den Du verteilen könntest. Was nicht zentriert ist, ist ihr Inhalt.

Was Du also eigentlich fragen müsstest, wäre:

Wie erreiche ich, dass die Links jeweils die volle Höhe der li-Elemente erhalten und ihr Inhalt vertikal zentriert ist?

Mit dieser Formulierung sollte deine Frage automatisch beantwortet sein: Höhe der LI, der A und Ausrichtung der A-Inhalte sind drei getrennte Themen. Zum Zentrieren des a Inhalts eignet sich beispielsweise display:grid und place-content:center (ist eine Zeile weniger als display:flex; justify-content:center; align-items:center). Damit die li Elemente die volle Höhe haben, gibst Du #options ein align-content:stretch (ja gut, ist Default) und den a Elementen height:100% und box-sizing:border-box.

Bei der Gelegenheit müsstest Du Border-Radius und Box-Shadow vom li auf's a verschieben, sonst gucken die Ecken der a Elemente aus den abgerundeten Ecken der li hinaus.

Guckst Du hier

Rolf

[Gunnar Bittersmann]

@@Felix Riesterer

Wie erreiche ich, dass die Links jeweils die volle Höhe der li-Elemente erhalten und dabei auch noch vertikal zentriert sind? Muss ich dazu die a-Elemente auf display:flex setzen

grid bietet sich an: Codepen

Kwakoni Yiquan

[Felix Riesterer]

Lieber Rolf, lieber Gunnar,

ich muss also ein Grid-Layout mit einem anderen Flex- oder Grid-Layout verschachteln. Das wollte ich bis jetzt nicht einsehen, aber nachdem ihr beiden im Grunde auf gleiche Weise bestätigt habt, dass ich es anders nicht sinnvoll erreichen kann, sehe ich das jetzt ein.

[Edit]Vielen Dank euch beiden![/Edit]

Liebe Grüße

Felix Riesterer

[Rolf B]

Hallo Felix,

mjam, knurspel, *gulp* - eigene Worte fressen ist so widerlich 🤮

Da die nahe liegende vertical-align im Flow-Layout etwas anderes tut, als man meint, geht es ging es bislang nicht anders.

TIL: Es geht anders - mit Box Alignment Level 3 und align-content.

Firefox ist vor 4 Wochen fertig geworden, Chrome ist es seit 8 Wochen.

Frisch im Wiki: Vertikales Ausrichten des Inhalts von Blockelementen mit align-content

Schachteln von Grid/Flexbox ist nicht mehr nötig.

Rolf

[Gunnar Bittersmann]

@@Rolf B

Schachteln von Grid/Flexbox ist nicht mehr nötig.

Mir will das (zumindest auf die Schnelle) nicht gelingen.

Hast du ein funktionierendes Beispiel parat? Nein, nicht das im Wiki; da ist die Liste eine Flexbox. Soll aber ein Grid sein.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

das Wiki-Beispiel zeigt jetzt beides.

Welcher Brauser? Safari muss mindestens 17.4 haben. Chromia Version 123, Feuerfüchse 125. Tenöre und Soprane die 107. Werwölfe^[1] kommen vermutlich erst übernächstes Jahr dran 😉

Rolf

---

1. Martin wird wissen, was ich meine 😜 ↩︎

[Der Martin]

Hallo Rolf,

Safari muss mindestens 17.4 haben. Chromia Version 123, Feuerfüchse 125. Tenöre und Soprane die 107. Werwölfe kommen vermutlich erst übernächstes Jahr dran 😉

Martin wird wissen, was ich meine 😜

bei den Werwölfen schon (obwohl ich die Ableitung gewagt finde), die basieren meines Wissens auf der letzten LTS-Codebase vom Fuchs.
Aber bei den Tenören und Sopranen bin ich verwirrt. Wenn es das ist, was ich angesichts der musikalischen Andeutung glaube - da steckt doch auch ein Chromium unter der Klappe, oder nicht?

Einen schönen Tag noch
 Martin

[Gunnar Bittersmann]

@@Der Martin

Aber bei den Tenören und Sopranen bin ich verwirrt. Wenn es das ist, was ich angesichts der musikalischen Andeutung glaube - da steckt doch auch ein Chromium unter der Klappe, oder nicht?

Unter der Klappe? Du meinst: im Souffleurkasten?

Kwakoni Yiquan

[Rolf B]

Hallo Der Martin,

Verwirrt…

Bist Du noch nie auf caniuse gewesen oder hast die Kompatibilitätsinfos bei MDN studiert?

Da steckt doch auch ein Chromium unter der Klappe

Ja. Aber es wäre ja zu einfach, wenn die Opera-Versionsnummern mit der darinsteckenden Chromium-Version übereinstimmten, gelle? So langweilig ist nur Microsoft.

Rolf

[Gunnar Bittersmann]

@@Rolf B

das Wiki-Beispiel zeigt jetzt beides.

Na gut, fürs li-Element muss man dann nichts weiter tun. Fürs a-Element muss man display trotzdem setzen, und sei’s auf block. Außerdem height: 100%.

Hatte ich auch probiert – und schon ragte die a-Box aus der li-Box heraus. Tja, man darf halt nicht vergessen, als allererstes * { box-sizing: border-box } zu setzen.

Sieht dann so aus: Link list 2

Ergänzung: Die vorige Variante hatte den Charme, dass man es ohne text-align: center hinbekommt, dass einzeilige Beschriftung mittig sitzt, während mehrzeilige Beschriftung nicht links und rechts Flatterrand hat.

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar,

die Schönheit ist zerbrechlich.

Mach einen der Namensteile von Philippa mal fett. Und schon hast Du einen Zeilenumbruch, wo keiner hingehört.

Mit Flex statt Grid bleibt es inline, aber die Spaces um den fetten Teil werden nicht dargestellt.

D.h. sobald der zu zentrierende Inhalt kein reiner Text ist, brauchst Du – je nach Bedarf – ein "Sicherheits-div" oder -span drumherum. Oder ich bin blöd…

Ich habe einen Blog-Beitrag dazu geschrieben, magst Du den Entwurf mal durchschauen?

Rolf

[Gunnar Bittersmann]

@@Rolf B

Hallo Gunnar,

die Schönheit ist zerbrechlich.

Mach einen der Namensteile von Philippa mal fett. Und schon hast Du einen Zeilenumbruch, wo keiner hingehört.

?? Meinst du das hier bei der Grid-in-Grid-in-Grid-Variante?

---

Ich habe einen Blog-Beitrag dazu geschrieben, magst Du den Entwurf mal durchschauen?

Liest sich nett, bis auf die gruselige (du sagst es) Überschrift. Vielleicht doch eher sowas Banales (und SEO-Gerechtes) wie „Vertikale Text-Zentrierung“?

Kwakoni Yiquan

[Rolf B]

Hallo Gunnar Bittersmann,

Meinst du das hier bei der Grid-in-Grid-in-Grid-Variante?

Ja Ja Ja.

Die Überschrift heißt jetzt „Vertikal Zentrieren - endlich gelöst?“

Rolf

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Vielleicht doch eher sowas Banales (und SEO-Gerechtes) wie „Vertikale Text-Zentrierung“?

Fun fact: Die Titel meiner Präsentationen sind i.d.R. auch alles andere als SEO-optimiert. Die wähle ich auch oft eher nach Unterhaltungswert. Worum’s darin wirklich geht, kann man erst in der Beschreibung lesen.

Kwakoni Yiquan

[Felix Riesterer]

Lieber Rolf,

Schachteln von Grid/Flexbox ist nicht mehr nötig.

Cool!!! Ganz herzlichen Dank!

Liebe Grüße

Felix Riesterer