Menu
HTML:
<body>
<div class = "container">
<div class = "nav">
<ul class = "pull-left">
<li><a class = "brand" href = "/">New York Guide</a></li>
</ul>
<ul class = "pull-right">
<li><a href = "#">Sign Up</a></li>
<li><a href = "#">Log In</a></li>
<li><a href = "#">Help</a></li>
</ul>
</div>
</div>
</body>
CSS:
.nav li {
display: inline;
}
.nav a {
color: white;
font-size: 12px;
font-weight: bold;
padding: 14px 10px;
text-transform: uppercase;
}
.nav {
background-color: #7f7f7f;
}
Currently, my navigation bar's text is close to the top of the gray bar. Is there any way to center it vertically in the bar?
Do I need to use padding or margin tags? Or something else entirely?
380
Add text-align:center to <li> or <a> to center the links. Add the border property to <ul> add a border around the navbar. If you also want borders inside the navbar, add a border-bottom to all <li> elements, except for the last one: Home.
You need to take the float:left off of both your #nav and li elements. Then add display:inline-block; to both. Next add your text-align:center to the #nav .
Select the text that you want to center. in the Page Setup group, and then click the Layout tab. In the Vertical alignment box, click Center. In the Apply to box, click Selected text, and then click OK.
You can move the nav elements to the center by putting text-align:center on the ul because the list elements have been set to inline-block which means they can be centred in the same way that you can centre text.
Your UL elements have an added margin-bottom property generated by bootstrap. Target your ULs and reset the margin to 0.
.nav ul{margin:0;}
Also, fix padding of your Links to be equal and make them display as inline-block:
.nav a {padding: 10px 10px; display:inline-block;}
Working example
65
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
