HTML Text in <li> vertikal zentrieren. Wie macht mans richtig?

M

Mr. Snoot

Gast
Hio,

ich habe horizontal angeordnete Listenelemente mit einer festen Breite und Höhe. Der Text soll nun jeweils horizontal als auch vertikal zentriert ausgerichtet werden. Leider ist vertikal zentrieren ja nicht so ohne Weiteres möglich, und Google spuckt zig verschiedene Lösungen dafür aus.

Folgendes hab ich so gefunden:

  • mit line-height
  • Listenelemente als table-cell formatieren (dann wäre vertical-align möglich)
  • mit position ausrichten
  • mit padding


Ich hab bisher immer letzteres benutzt, aber für mich sind alle Lösungen nur Tricksereien (natürlich logisch, wenn's nichts offizielles gibt). Was ist am sinnvollsten?
HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

<html>
  <head>
    <title></title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">

      body { font-family:Verdana; font-size:12px; }
      ul { list-style-type:none; }
      li { text-align:center; float:left; width:96px; height:30px; background:url(navbar.png) }
      a { display:block; text-decoration:none; color:#000; height:22px; padding-top:8px; }

    </style>
  </head>

  <body>

    <ul>
      <li><a href="/link1">Link 1</a></li>
      <li><a href="/link2">Link 2</a></li>
      <li><a href="/link3">Link 3</a></li>
    </ul>

  </body>

</html>
 

Anhänge

  • navbar.png
    navbar.png
    207 Bytes · Aufrufe: 2.433
Den Text den du vertikal positionieren willst in <span> packen und das span dann mit vertical-align: top bottom oder -/+ Prozent nach oben oder unten, + = hoch , - = runter positionieren.

Sorry, hier ein Beispiel..

HTML:
<ul>
<li><span style="vertical-align: -30%">12345</span></li>
<li><span style="vertical-align: +50%">12345</span></li>
</ul>
 
Zuletzt bearbeitet:
Zurück
Oben