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
Vollansicht: <li> Navigation vertikal text zentrieren
text-align:center
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
gruß toto
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…
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:
Hier mal zum copy&paste für eigene Experimente:
QUELLTEXT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<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>
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
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?
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
leiderok, mit
QUELLTEXT
<ul>
<li>Link</li>
</ul>
<ul>
<li>Link<</li>
</ul>
<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?
Keine Ahnung warum du float brauchst. Nur mal eine Anregung:
QUELLTEXT
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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>
<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>
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
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
Dieses ist eine vereinfachte Darstellung unseres Foreninhaltes. Um die detaillierte Vollansicht mit Formatierung und Bildern zu betrachten, bitte hier klicken.