Ich habe eine funktionale CSS-Navigationsleiste, abgesehen von einigen fugly CSS-Nebenwirkungen -
Ich versuche, den Text in jedem Listenblock vertikal zu zentrieren, und vertical-align: middle funktionierte nicht. Stattdessen verwende ich padding-top: 13px, aber das macht den gepolsterten Bereich ohne die background-color des Rests der Liste Element, und die Styling der Link tut nicht zu den gepolsterten Bereich entweder zu erweitern! (a:hover betrifft nur den Bereich unter dem Padding)
Also wie kann ich Text in Listenelementen ohne diese CSS-Probleme vertikal zentrieren? Hier
ist die entsprechende CSS:
Wie kann ich Text in einer UL-Navigationsleiste ohne diese mehrfachen CSS-Konflikte vertikal zentrieren?
/* header section */
#header
{
padding-left: 115px;
margin-bottom: 10px;
}
#main-menu
{
list-style-type: none;
}
#main-menu li
{
border: 1px solid black;
text-align: center;
padding-top: 13px;
color: #666;
font-family: "Lucida Console";
font-variant: small-caps;
letter-spacing: 2px;
/* for block layout */
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 153px;
height: 32px;
}
#main-menu a:link, a:visited
{
display: -moz-inline-box; /* for firefox */
display: inline-block;
width: 100%;
height: 100%;
background-color: #eee;
}
#main-menu a:hover, a:active
{
background-color: #bbb;
}<br /><br />
... und hier ist die relevanten HTML:
<!-- header section -->
<div id = "header">
<ul id = "main-menu">
<!-- no spaces between list elements when all on the same line! -->
<li><a href = "home.html" title = "home">home</a></li><li><a href = "about.html" title = "about">about</a></li><li><a href = "cart.html" title = "shopping cart">cart</a></li><li><a href = "login.html" title = "log in">login</a></li><li><a href = "createAccount.html" title = "create a new account">sign up</a></li>
</ul>
</div> <!-- end of header section -->
Ah! Ich hatte "margin-top" versucht, aber da der Rand die Außenseite (und nicht das Innere) betrifft, funktioniert das nicht. Es war die Lösung, die Polsterung loszuwerden und 'line-height' hinzuzufügen, danke dafür. Ich habe nicht erwogen, sowohl "Höhe" als auch "Zeilenhöhe" zu haben, könnten Sie das näher ausführen? –
Ja, im Prinzip stellen Sie die Höhe des Elements wie gewünscht ein und legen dann die Zeilenhöhe auf die Höhe fest. Dies funktioniert jedoch nur mit einer Textzeile (es gibt Ausnahmen, die außerhalb des Bereichs Ihrer Bedürfnisse liegen). –