html5 - How do you center a line-wrapped <nav> menu in CSS? -
i have ul centered in wide , narrow widths breaks in mid range. when wide fits nice, when browser narrow stacks nice, when using mid width, 800px wide, menu wraps next line, works now, see if possible center second row of links. here screenshot of how looks on top (red circle), , want on bottom (green circle).
if @ another thread, see kind of how menu works right in example link. if shrink browser on example notice menu wraps , second row left aligned.
i have second row centered under first row in picture above. possible?
here html:
<div id="navcontainer" <ul> <li class="menu_home"><a href="/">home</a></li> <li class="menu_gallery squished"><a href="/galleryintro.php">gallery of properties</a></li> <li class="menu_service"><a href="/service.php">service options</a></li> <li class="menu_contact"><a href="/contact.php">contact us</a></li> <li class="menu_test"><a href="/panos/laakona2/">testing hotspots</a></li> </ul> </div>
i don't think css needed since isn't working want anyway (and spread out through 38 different css files, floating left, can add css here if think might help, willing scrap anyway...)
add
text-align:center;
to .nav ul in tinkerbin example.
or:
#navcontainer ul { text-align:center; }
to own css
Comments
Post a Comment