Druckversion des Themas
Hier klicken um das Topic im Orginalformat anzusehen
Forum Sefrengo.org _ Offtopic _ <li> Navigation vertikal text zentrieren
Geschrieben von: toto Tue. 25. August 2009, 10:10
Hallo und ein herzliches Willkommen an alle CSS und HTML Profis,
ich habe ein Problem mit vertikaler Zentrierung bei einer Navigation. Wie man sieht, ist der Text leider nicht überall einzeilig und es gibt ein Hintergrundbild. Momentan habe ich es mit padding gelöst. Gibt es eine Möglichkeit ohne Tabellen, die Texte vertikal zu zentrieren?
Ich bedanke mich
der toto
Geschrieben von: pawel Wed. 26. August 2009, 16:48
text-align:center
Geschrieben von: paulinsche Wed. 26. August 2009, 20:14
Schau doch mal http://www.css4you.de/Texteigenschaften/vertical-align.html oder http://css-blog.com/2005/07/01/vertical-align oder http://css-blog.com/2005/07/01/vertical-align
Geschrieben von: toto Thu. 27. August 2009, 16:12
hm, danke aber funktioniert alles nicht. das problem ist, das mein Text nicht einzeilig sondern teilweise auch 2zeilig ist. irgendwie hab ich mit inline und vertical-align: middle schon alles ausprobiert, aber et jeht nüsch. Also doch Tabelle, was. :/
gruß toto
Geschrieben von: paulinsche Thu. 27. August 2009, 16:29
Ich hab das mal so gelöst, dass ich ein 1px-GIF (1px breit, gewünschte Pixelzahl in der Höhe) vorangestellt habe. Ob das allerdings mit den zwei Zeilen funktioniert, weiß ich nicht…
Geschrieben von: pawel Thu. 27. August 2009, 16:53
Sorry, die willst vertikal positionieren. Vertical-align wirkt nicht in Blockelementen (aber in Tabellen). Also musst du ein Blockelement in eine Tabelle verwandeln.
Hier mal zum copy&paste für eigene Experimente:
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertikkales Zentrieren</title>
<style type="text/css">
ul {
display: table;
}
li {height: 5em; display:table-cell; vertical-align:middle; outline:.1em solid red}
</style>
</head>
<body>
<ul>
<li>Link 1</li>
<li>Link 2</li>
</ul>
</body>
</html>
Geschrieben von: toto Fri. 28. August 2009, 07:58
Hi pawel,
das war ein sehr guter Tipp! allerdings hab ich ja eine vertikale navi und sobald elemente wie "Block" (wegen den rolloverbildern) oder float:left reinkommen, sieht die sache wieder anders aus 
leider
ok, mit
<li>Link</li>
</ul>
<ul>
<li>Link<</li>
</ul>
geht es. Sieht zwar wild aus aber funktioniert, bis auf den IE, bei dem kleben die Zeilen oben am Rand :/ scheiß teil
gibts da auch eine umgehung?
Geschrieben von: pawel Fri. 28. August 2009, 16:55
Keine Ahnung warum du float brauchst. Nur mal eine Anregung:
<html xml:lang="en" lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Vertikkales Zentrieren</title>
<style type="text/css">
ul {
display: table;
width:9em
}
li {width:9em;height: 3em; display:table-row;}
li a{display:table-cell;vertical-align:middle; text-align: center; background:url(http://www.lazkotraining.de/media/img/links_navi_over.gif) top right no-repeat;}
</style>
</head>
<body>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
</ul>
</body>
</html>
Geschrieben von: toto Mon. 7. September 2009, 13:00
Man super!
Ich hab das mit cell und row nicht so ganz geschnaggelt. Jetzt lübbt et! Danke dir pawel und ich habe wieder was gelernt. Ist zwar etwas kompliziert aber ich hab es schon immer gehaßt mit den 1- und 2zeiligen Navigationsnamen.
Aus dem Urlaub zurück und gleich am Montag so eine tolle Neuigkeit!
Gruß toto
Unterstützt von Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)