vertikal innerhalb ul zentrieren
Hagen
- css
Hallo,
ich habe eine Liste (horizontal) mit einer festen höhe von 50px, und die <li> sollen darin vertikal zentriert werden, hat jemand eine idee wie ich das anstelle?
MFG Hagen
Hi Hagen
Du kannst mit padding, margin und/oder line-height arbeiten. Die Wahl der Waffen bleibt dir überlassen.
so long
Ole
(8-)>
Hi,
vielen dank für deine antwort.
also padding und margin fallen weg, die li haben einen rand an der rechten seite und wenn ich padding oder margin verwende wird der mit verschoben und damit ist ein lücke zwischen dem rand und dem rand von<ul>. Zum besseren verständnis hier mal den relevanten code:
ul#navigation{
margin:0;
padding:0;
background-image:url(../images/bg_navi.jpg);
background-repeat:repeat-x;
font-size:0.89em;
height:50px;
font-weight:900;
}
ul#navigation li {
list-style: none;
display: inline;
padding: 0;
}
ul#navigation a{
height:50px;
float:left;
color:#fff;
text-decoration:none;
padding-left:1em;
padding-right:1em;
border-right:1px solid #fff;
}
ul#navigation a:hover{
background-image:url(../images/bg_hover.jpg);
background-repeat:no-repeat;
background-position:50% 100%;
}
und das HTML Gedöns:
<ul id="navigation">
<li><a href="">Home</a></li>
<li><a href="">About me</a></li>
<li><a href="">Skills</a></li>
<li><a href="">Studies</a></li>
<li><a href="">Login</a></li>
<li><a href="">Guestbook</a></li>
<li><a href="">Contact</a></li>
</ul>
Hi
mach aus
ul#navigation a{
height:50px;
}
ul#navigation a{
line-height:50px;
}
dann sind deine Texte vertikal zentriert.
so long
Ole
(8-)>
Danke, absolut perfekt!
MFG
Hey,
also padding und margin fallen weg, die li haben einen rand an der rechten seite und wenn ich padding oder margin verwende wird der mit verschoben und damit ist ein lücke zwischen dem rand und dem rand von<ul>.
Warum sollte sich links und rechts vom Element was tun, wenn du oben und unten formatierst?