<nav> text vertical-align werkt niet?!
ik heb een css opmaak gemaakt voor mijn menu/navigatie met veel voorbeelden te gebruiken en ben bijna zo ver gekomen dat ik er tevreden mee ben. ik kom alleen een uitdaging tegen ik krijg de tekst van de link niet in het midden met vertical-align op google staat wel een paar oplossingen maar het lijkt niet te werken ik hoop dat jullie mijn kunnen helpen.
Voorbeeld: http://www.mymovement.nl/menu_test.html
Code:
<style>
nav ul {
list-style: none; background: #84ACD6; padding: 50px 20px; width: 100%; position: relative;
left: -9px;
}
nav ul li { display: inline; }
nav ul li a {
display: block;
float: left;
background: #6A99CC;
height: 35px;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: bold 16px "Lucida Grande", "Verdana", sans-serif;
text-decoration: none;
color:#FFFFFF;
margin: 0 10px 0 0;
vertical-align:
}
nav ul li a:hover {
display: block;
float: left;
background: #FFFFFF;
height: 35px;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: bold 16px "Lucida Grande", "Verdana", sans-serif;
text-decoration: none;
color:#6A99CC;
margin: 0 10px 0 0;
}
nav ul li a:active, nav ul li a.current {
display: block;
float: left;
background: #FFFFFF;
height: 35px;
padding: 0 11px;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: bold 16px "Lucida Grande", "Verdana", sans-serif;
text-decoration: none;
color:#6A99CC;
margin: 0 10px 0 0;
}
</style>
<nav>
<ul class="group">
<li><a href="index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="over.html">Over Ons</a></li>
</ul>
</nav>
Alvast bedankt!
Gr. Roy
Als je iets in het midden wilt hebben kun je beter line-height gebruiken. Daar vul je dan de hoogte in van de div en hij staat in het midden.
BV bij de a de volgende css mee te geven:
height: 19px;
padding: 8px 11px;
@Hertog, paddings hoeft niet. Zie ook mijn post over line-height.
Stel een tekst/menu (komt nog regelmatig voor bij een submenu) valt op 2 regels, dan heb je een line-height van 35px, denk je dat dit mooi lijkt? Daarom kun je het beste met paddings werken.
Bedankt mannen!!
Bij de height moet je nog de padding/borders bij optellen. Dus 19px + 8px padding top + 8px padding bottom = 35 px :)