jquery - How to center <ul> in a page? -
i have created ul element. these html , css navigation bar:
html:
<ul id="list-nav"> <li><a href="marsrutas.html">item1</a> </li> <li><a href="nuotraukos.html">item2</a> </li> <li><a href="apie zygi.html">item3</a> </li> <li><a href="apie mane.html">item4</a> </li> <li><a href="dviraciai.html">item5</a> </li> <li><a href="kontaktai.html">item6</a>
css:
ul#list-nav { margin:40px; padding:0; list-style:none; width:525px; } ul#list-nav li { display:inline text-align: center; } ul#list-nav li { text-decoration:none; padding:5px 0; width:65px; color:#eee; float:left; margin:5px; } ul#list-nav li { text-align:center; } ul#list-nav li a:hover { color:#000; border-width: 1px; border-style: solid; border-color: #ffffff; -moz-border-radius: 5px; border-radius: 5px; }
how can allign navigation bar in center of page?
also, want ask how make li items stay still on hover, because move bit bottom when mouse on them. example: http://jsfiddle.net/bufbond/uj76f/
fiddle:
just add margin auto centering:
#list-nav { margin:auto; } ul#list-nav li { text-align:center; border-width: 1px solid #000; } ul#list-nav li a:hover { color:#000; -moz-border-radius: 5px; border-radius: 5px; }
remove border hover or change color on hover.
Comments
Post a Comment