Horizontale Liste mittig positionieren, vertikal ausrichten

[jonathan09]

Hallo zusammen!

Eine Liste soll horizontal dargestellt und mittig positioniert werden. Gleichzeitig sollen die Listenpunkte eine festgelegte Höhe haben und der Text soll vertikal zentriert werden.

    <ul id="info">
      <li>Schon<br />ein<br /> Text</li>
      <li><a href="" title="">Link1 </a></li>
      <li><a href="" title="">Link2</a></li>
    </ul>

Ich habe es mit display: inline-block; gelöst. Allerdings kann lediglich den Links eine feste Höhe zugeordnet werden; bei der entsprechenden Angabe im li-Element verschieben sich die einzelnen Listenpunkte. vertical-align klappt hier auch nicht. Padding kann ich den Links nicht hinzufügen, da - wie im HTML Code sichtbar - die Listenpunkte unterschiedliche Zeilenanzahl aufweisen können und nicht alle als Link ausgebildet werden.

Habt Ihr eine Idee, wie ich das lösen kann?

#info {
  margin: 0;
  padding: 0;
  width: 100%;
  list-style-type: none;
  text-align: center;
  border: 1px solid green; }
  
  #info li {
    display: inline-block;
    width: 200px;
    background: #999;
    text-align: center; }

		#info li a {
      display: inline-block;
      height: 80px;
      background: green;
      vertical-align: middle; }

 

[prm]

Dies sollte dir helfen: Horizontale Zentrierung einer gefloateten Listen-Navigation

Eine vertikale Textzentrierung erreichst du, indem du einen line-height-Wert entsprechend der li-height hinterlegst.

 

[jonathan09]

Danke für den Link!