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).

enter image description here

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

Popular posts from this blog

SPSS keyboard combination alters encoding -

Add new record to the table by click on the button in Microsoft Access -

javascript - jQuery .height() return 0 when visible but non-0 when hidden -