Flexbos und vertikales Zentrieren

[M.]

Mahlzeit,
ich bau grad ein Projekt auf Flexbox um. Damit spar ich mir einiges an Javascript um das menü auf die verschiedenen Bildbreiten anzupassen.

Jetzt will ich den Text vertikal zentrieren, bisher aber keine taugliche Lösung gefunden. Scheint, als wären Dokus für die Flexbox noch nicht so ausgereift, wie andere ;)

  
<main>  
<ul>  
	<li class="box enabled">  
		<div>OMX_Player</div>  
	</li>  
	<li class="box enabled">  
		<div>MPD_Client</div>  
	</li>  
	<li class="box enabled">  
		<div>Internet</div>  
	</li>  
	<li class="box enabled">  
		<div>DVD</div>  
	</li>  
	<li class="box enabled">  
		<div>Net_IO</div>  
	</li>  
	<li class="box enabled">  
		<div>Video</div>  
	</li>  
</ul>  
</main>  

  
main {  
  height: 100%;  
}  
  
main ul {  
  height: 100%;  
  box-sizing: border-box;  
  padding: 0;  
  margin: 0;  
  list-style: none;  
  display: -webkit-flex;  
  display: flex;  
  -webkit-flex-flow: row wrap;  
  justify-content: space-around;  
}  
main ul li {  
  box-sizing: border-box;  
  width: 48.4375%;  
  margin: 0.78125%;  
  border-radius: 20px;  
  -webkit-flex-grow: 1;  
  -webkit-box-pack: center;  
  -webkit-box-align: center;  
}  
  
main ul li div {  
  text-align: center;  
  display: box;  
  -webkit-align-self: center;  
  -webkit-align-items: center;  
}  

Habs ohne zusätzliches div probiert, mit display: table-cell; im li, display: block; und vertical-align: middle;

line-height greift zwar, da aber die Höhen dynamisch sind, je nach Anzahl der Menüpunkt und Höhe des Viewports, hilft mir das nicht.
Da ich das erste mal mit Flexbox arbeite, hat vielleicht jemand nen Tip für mich. Grundsätzlich will ich den Text mittig haben, unabhängig von der Höhe des li und der Font-Grösse.
Und wenn es im Chrome, neuer als 27 funktioniert, reicht das auch. Crossbrowser ist völlig unnötig in diesem Fall.

[Matthias Apsel]

Om nah hoo pez nyeetz, M.!

line-height könnte helfen. Du musst allerdings aufpassen, wenn du nicht mehr in einer Zeile bleibst.

Matthias

[Matthias Apsel]

Om nah hoo pez nyeetz, Matthias Apsel!

line-height könnte helfen. Du musst allerdings aufpassen, wenn du nicht mehr in einer Zeile bleibst.

Das wichtigste vergessen: line-height als Prozentangabe.

Matthias

[M.]

Mahlzeit,
danke erstmal für deine Antwort.

Das wichtigste vergessen: line-height als Prozentangabe.

Und welche Prozentangabe, wenn ich die Höhe nicht kenne?
Die Anzahl der Menüpunkte und somit die Anzahl der Zeilen ist nicht festgelegt. Sorry, das hab ich vergessen zu erwähnen.

Ich komm mir grad vor wie ein Anfanger ~g~
Bisher hab ich das ja mit JS nachgezogen, wenn es aber auch mit CSS direkt gehen sollte, ziehe ich das vor :)

[Matthias Apsel]

Om nah hoo pez nyeetz, M.!

Das wichtigste vergessen: line-height als Prozentangabe.

Und welche Prozentangabe, wenn ich die Höhe nicht kenne?

wobei das natürlich auch grundsätzlich quatsch ist, denn eine Prozentangabe bei line-heigth bezieht sich auf die font-size und nicht auf irgendeine Höhe. - Fehler meinerseits

Was ist mit display: table fürs li und display: table-cell fürs div?

Matthias

[M.]

Mahlzeit,

Was ist mit display: table fürs li und display: table-cell fürs div?

Dann wird das li auf die Höhe des Div (und aus den darin enthaltenen Text) gesetzt, damit ist die Höhe nicht mehr dynamisch, nur die Abstände vergrössern sich.

Ich kann auch das div nicht auf 1200% aufziehen, da das parent-li keine Höhe zugewiesen bekommen hat, da die von der Flexbox kommt.

Das Problem ist, wenn ich auf die Höhe der Flexbox nicht zugreifen kann, sehe ich keine Lösung.
Dann werd ich doch nochmal mit JS nachhelfen müssen.